<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          10 個獨特的 CSS 背景視覺效果

          時間:?2017-11-09閱讀:?1169標簽:?背景

          這幾年的web設計中,大背景的設計變得越來越流行。特別是在現在大屏大行其道的情況下,設計師在設計中越來越多的使用大分辨率的背景圖來填充屏幕,這樣更能制造獨特的視覺效果,能更好的傳達他們想要向用戶傳達的內容。

          但是,大部分的設計僅僅是硬生生的把大背景圖填充就了事了。其實,借助于CSS和JavaScript的力量,可以創建一些獨特的視覺效果,可以使體驗更加優雅。

          下面就來陳列一些使用不同的CSS和JavaScript技術來創建的一些獨特的帶有大背景的視覺效果,當然也會對它們所使用的技術做一個簡單的說明,可以快速的應用到項目中去。

          CSS顏色混合模型(Blend Mode)視覺效果

          CSS的混合模型(Blend Mode)是一個新屬性,可以實現Photoshop中的圖層的混合模型的效果。利用它和鼠標的滾動可以實現一些非常酷的顏色滾動效果。比如下面這個例子就使用CSS的混合模型(Blend Mode)和背景圖片實現的一個效果:

          詳細的代碼可以去這里查看。

          視差滾動動畫

          視差滾動的應用在web中已經應用的很廣泛了,也又很多種表現形式,這里說的這種是兩個不同的圖片在水平方向上往不同的方向運動:

          詳細代碼地址

          斜切視覺效果

          把背景圖片進行一定角度的斜切的視覺效果,在最近這段時間已經風靡設計圈了。在之前要實現這樣的效果,可能要做很多額外的事情。不過現在好了,利用CSS新的屬性transform可以非常輕松的實現這樣的效果:

          詳細代碼地址

          漸變動畫視覺效果

          如果,運用大量背景圖片動畫,可能會分散用戶的注意力。使用漸變顏色的動畫,在一些場景下就不會有這樣的問題,因為漸變顏色的動畫效果非常的微弱,在視覺上不會造成很大的干擾:

          詳細代碼地址

          滾動模糊視覺效果

          滾動模糊這種視覺效果也應用的非常廣,特別是當你想使用背景圖片吸引用戶而且還能讓用戶在滾動的時候閱讀圖片上文字的時候,就很適合使用它。只需要借助一點點JavaScript來改變圖片的background-size屬性就可以實現這樣的效果:

          詳細代碼地址

          視差滾動Hero Image圖片效果

          下面這個效果應用的也非常多。首先,是一張大的圖片在文章的頂部并且圖片上面還覆蓋了一個遮罩圖層用來營造一種不同的顏色視覺效果。然后用漸隱漸顯的動畫效果來引入圖片,最后在滾動的時候,使用了視差的效果來隱藏圖片。這個效果完完全全只需要一點點CSS代碼,不需要JavaScript。

          代碼地址

          圖片移動放大縮小視覺效果

          下面這個效果在一些電商網站上用的比較多。當鼠標在圖片移動的時候,圖片會跟隨鼠標的位置放的圖片該位置以便可以看到更多的細節。這種簡單的交互可以很好的吸引用戶的注意力。

          代碼地址

          圖片前后對比視覺效果

          這種效果經常用來對比圖片使用,比如在一些壓縮圖片的網站上,就經常使用這種效果來對比壓縮前和壓縮后圖片效果,用來突出壓縮效果。

          代碼地址

          滾動改變顏色視覺效果

          有時候僅僅是簡簡單單的改變一下背景的顏色就可以起到四兩撥千斤的效果。比如下面這個效果,就是通過監聽網頁滾動的位置來改變背景顏色,簡簡單單就可以營造一種別樣的視覺效果。

          代碼地址

          一點點看法

          在新的設計理念中,背景圖片不再僅僅是一種設計的表現手段,而是內容的一部分。這一點從現在很多的web上也可以看出來,有各種各樣的方法來加強圖片在內容中的重要性,也有各種各樣的技術來通過使用圖片提高用戶的使用體驗。

          本文主要是從10 Snippets for Creating Unique CSS Background Effects這篇文章整理而來,有刪減,有疏漏或者理解不到位的地方,還請多多指教!

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/76

          HTML設定頁面可滾定 背景圖片固定

          有時項目中會遇到背景圖固定,頁面內容可以滾動,背景不隨頁面滾動而滾動。就像QQ空間、微博設置自定義背景圖的固定選項。其實很容易實現,利用 background-attachment:fixed;

          CSS設置background添加背景色兩張或多張背景圖

          我們都知道可以用 CSS 給 background 添加背景色和背景圖:那么可以給元素設置兩個或者多個背景圖嗎?答案是可以

          css3新增的背景屬性有哪些?

          在 CSS3 之前,背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中,可以規定背景圖片的尺寸,這就允許我們在不同的環境中重復使用背景圖片。您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸

          HTML5實現首頁動態視頻背景

          你想實現動態視頻作為背景的首頁嗎?來,一起來學習,本文將帶你一起實現H5動態視頻背景;首先網上找一段清晰的視頻下載下來,最好是MP4格式的;

          Flutter設置背景圖片

          在我們平時的開發中會經常使用到背景圖片,下面我這介紹的是Container通過BoxDecoration來設置的;Scaffold路由頁面的骨架,我們在里面可以拼裝出一個完整的路由頁面

          CSS背景background

          背景顏色background-color取值:合法的顏色值和transparent,注:背景顏色和背景圖片,填充都是從邊框開始;background-posion:x y,設定的值都是相對于瀏覽器,不是相對于容器,將背景圖固定在網頁某個位置,一直處于可視區域中

          Css背景定位

          同一個標簽可以同時設置背景顏色和背景圖片,如果顏色和圖片同時存在,那么圖片會覆蓋顏色,1.在CSS中有一個叫做background-position:屬性,就是專門用來控制背景圖片的位置2.格式:background-position:值1 值2;

          CSS3制作文字背景圖

          文字帶上漸變色,或者說讓文字透出圖片。這些效果 CSS 屬性也可以完成。 使用 mix-blend-mode 能夠輕易實現,我們只需要構造出黑色文字,白色底色的文字 div ,疊加上圖片,再運用 mix-blend-mode 即可,簡單原理如下:

          jquery使用css函數設置背景色無效解決辦法

          外部的css樣式為:cssText 屬性,會把先前的 css 值全部給覆蓋掉,為了保留先前其他的樣式,可以把現有樣式賦值給cssText,像比如要保留width屬性,當然cssText也可以鏈式設置樣式:

          H5移動端點擊出現背景藍色框的解決方案

          當我們在移動端給元素添加點擊事件時我們會發現點擊時元素會默認出現一個背景色框或者高亮顯示 ,如何去掉藍色邊框?是用來解決在安卓上的點擊出現籃框問題

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网