H5如何製作動態視覺差背景

来源:http://www.cnblogs.com/Lmey/archive/2017/06/11/6984877.html
-Advertisement-
Play Games

製作網站時,可能會用到視覺差效果 如圖 視覺差在製作網頁時會有很炫酷的效果,今天要講的是如何呈現動態視覺差 效果如圖: 製作方法首先需要一個視覺差的插件 我所用的插件是一款較為大眾的視覺差插件 導入這三個css文件後,在style中可以修改圖片 將圖片修改為指定gif即可 下麵介紹不使用插件方法 選 ...


製作網站時,可能會用到視覺差效果

如圖

 

視覺差在製作網頁時會有很炫酷的效果,今天要講的是如何呈現動態視覺差

效果如圖:

 

 

製作方法首先需要一個視覺差的插件

我所用的插件是一款較為大眾的視覺差插件

    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />

導入這三個css文件後,在style中可以修改圖片

 

將圖片修改為指定gif即可

 

 

下麵介紹不使用插件方法

        <div id="bei1">
            <img src="img/pubu1.gif"/>
        </div>
        <div id="bei2">
            <img src="img/pubu2.gif"/>
        </div>        

選取了一個gif

通過PS將一張大的gif圖進行簡單的裁剪,按照比例裁出兩個側邊

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 游戲裡面的基本角色 其中,角色的基本屬性即基礎攻擊力、基礎防禦力、基礎生命值、基礎魔法值。 然後角色可以通過其他裝備進行添加這四行屬性。 所以裝備就是裝設者(不同的裝飾者,增加不同的屬性),而不同的基礎屬性(人族、神族、魔族)就是不同的組件 然而,我看得不是很懂上面的。只好自己來理解下這裝飾者模式。... ...
  • 老生常談的一個問題: 面向對象和麵向過程區別是什麼? 1.面向對象:把一系列對事物描述封裝成類,則由對象來完成業務中特定的功能 他有屬性,構造器,方法,以及這個對象的行為,冒個特定的方法封裝成一個類,從而由類產生多個對象 2.面向過程:就是分析出解決問題所需要的步驟,然後用函數把這些步驟一步一步實現 ...
  • push()push()方法在數組的尾部添加一個或多個元素,並返回新的數組長度。pop()pop()方法與push()方法相反, 它是刪除數組的最後一個元素。 unshift()unshift()方法與push()方法非常類似,它是在頭部添加一個或者多個元素,並返回新數組的長度。 shift()sh ...
  • 自己的總結的一些方法,如果有什麼新的好的方法希望能夠交流: 1.給定位(導航欄)(底部) nav{ position:fixed; top:0rem; }; footer{ position:fixed; bottom:0rem; }; 但是這個方法會有弊端,在你給nav設置定位時,內容區域就會頂頭 ...
  • 1、盒子模型 所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子,也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)組成。 用公式表示就是:盒子=邊框+內邊距+內容區域+外邊距 元素框的最內部分是實際的內容,直接包圍內容的 ...
  • 在 javascript 中,可以使用 == 來比較兩個數據是否相等,如果兩個數據的類型不同,那麼,將在進行轉換後進行比較,轉換的規則如下: l 如果其中一個操作數的類型為 Boolean ,那麼,首先將它轉換為數字類型,false 轉換為 0, true 將轉換為 1。 l 如果其中一個操作數的類 ...
  • 行內元素格式化順序:font-size-->em框-->內容區-->行內框-->根據基線放置行內框-->確定行框高度 相關概念: leading(行間距):指填充在兩行文字間的鉛條,等於line-height 和 font-size之差,其中一半leading加到文字上方,另一半leading加到文 ...
  • 一、縱向菜單 效果圖: 二、橫向菜單 效果圖: 三、下拉菜單 效果圖: 縱向的下拉菜單 給最外層容器nav添加額外的一個類,vertical成為<nav id="nav1" class="vertical">。。。。<nav> 然後添加如下的css規則: 效果圖: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...