CSS並不簡單--帶你認識不一樣的漸變

descire發表於2017-09-17

作為CSS3新增的屬性,漸變也有著無窮的潛力。

一、簡介

  漸變是CSS3新增的圖片型別,用來代替圖片,它的好處有:

  • 加快頁面的載入速度,減少頻寬的佔用;
  • 更加靈活。

二、線性漸變

  其實漸變的使用也挺常見的,例如導航欄:

餓了麼網頁版導航欄

    background-image: linear-gradient(90deg,#0af,#0085ff)
複製程式碼

  很顯然,這比純色的背景好看太多了。

  當然,有時間我們並不需要過渡效果:

法國國旗

    background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);
複製程式碼

  對於線性漸變,除了linear-gradient,還有repeating-linear-gradient:

重複條紋背景

    $c1: #fff;
    $c2: #DF5646;
    $c3: #1C78A4;
    background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);
複製程式碼

  由此可見,漸變並沒有那麼簡單。

  這裡肯定有人要問,還能玩出什麼花樣?首先我們要明白漸變是一種圖片,那麼再想想還有什麼與圖片一起使用的CSS屬性?

背景

    $color: #122556;
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),
                      linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);
    background-size: 30px 30px;
複製程式碼

  通過這個例子,是不是使用漸變的思路更加開闊了。不過這裡還需要注意一點:

  • 當你宣告多個漸變時,最先宣告的,離使用者越近。(這裡就需要我們考慮遮蓋的問題,一般採用transparent);

  同樣,漸變也可以做動畫

漸變背景動畫

    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &:hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }
複製程式碼

三、徑向漸變

  對於徑向漸變的radial-gradient和repeating-radial-gradient的使用技巧基本上和線性漸變差不多,這裡大家自己去探索吧。

四、總結

  最後以什麼結束呢,哈哈最近各種優惠券,那我們用漸變的知識來搞張優惠券吧:

image

	width: 300px;
    height: 120px;
    background: radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(transparent 0, transparent 5px, rgb(247,245,201) 5px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                radial-gradient(#fff 0, #fff 10px, rgb(247,245,201) 10px) no-repeat,
                linear-gradient(90deg,transparent 10px, rgb(247,245,201) 10px);
    background-size: 20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,20px 20px,60px 60px,60px 60px,100% 100%;
    background-position: -10px 0,-10px 20px,-10px 40px,-10px 60px,-10px 80px,-10px 100px,60px -30px,60px 90px,left center;
複製程式碼

  現在是不是思緒萬千,那還不趕緊碼起來。


  喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.

CSS並不簡單--帶你認識不一樣的漸變

相關文章