CSS3動畫：流彩文字效果+圖片模糊效果+邊框伸展效果實現

標籤：lin   pos   com   布局   parent   back   ros   form   class   

前言

首先第一步，先布局html代碼如下：

<div class="wrap">    <img src="images/1.jpg" class="blur"/>    <div class="text-gradient ">天賜神功</div>    <div class="border"></div></div>

上面一看第一個圖片img 就是實現圖片模糊效果的DOM元素，text-gradient實現的是流彩文字效果的DOM元素，border實現的是邊框伸展效果的DOM元素

想一想樣式該咋寫呢，根據這個布局，我們先來實現圖片模糊效果。

圖片模糊效果

圖片模糊效果要用到的是css3的filter屬性，想詳細瞭解可以點擊《CSS3 Filter詳解（改變模糊度 亮度 透明度等方法）》。

先寫下wrap的樣式：

.wrap{    position: relative;    width:300px;    height:225px;    text-align: center;}

.blur的樣式如下：

.wrap .blur{    position: absolute;    top:0;    left:0;    width:300px;    height:225px;    z-index:1;}.wrap:hover img.blur{    transition: all .5s ease;    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */    -webkit-filter: blur(10px); /* Chrome, Opera */    -moz-filter: blur(10px);    -ms-filter: blur(10px);     filter: blur(10px);     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /*IE6~IE9 */}

我們逐步來分析下這個代碼：

首先一般的CSS3 blur濾鏡實現代碼如下：

.blur {        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);    }

SVG濾鏡實現：

不管倒騰什麼方法，搞一個代碼如下，且全名為blur.svg的SVG檔案：

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">         <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs></svg>

上面defs標籤的代碼就是添加的濾鏡代碼。

如下CSS調用代碼：

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

然後，效果就出來了。如果你手上的瀏覽器是FireFox25-就能看到效果。

IE10以及IE11以及以後的IE11+都是支援SVG的濾鏡的，但是，此demo在這些瀏覽器下是無效的，為何？

好像因為其不支援直接在CSS使用使用filter: url的寫法，其實，要想實現IE10, IE11下的模糊效果，也是可以，就是適用性差了點，圖片要寫入SVG代碼，類似下面：

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">     <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs>    <image xlink:href="mm1.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" /></svg>

然後，SVG作為背景圖片載入：

.blur {    background-image: url(blur.svg);}

這樣就可以了。

IE6?-IE9瀏覽器可以藉助IE filter模糊濾鏡實現，如下CSS：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); 

所以最終綜合代碼：

.blur {        filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}

如果還想詳細瞭解可點擊《小tip: 使用CSS將圖片轉換成模糊(毛玻璃)效果》

流彩文字效果

先上css代碼：

.wrap:hover .text-gradient {     position: relative;    z-index:2;    display: inline-block;    color: black;    font-size: 30px;    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);    -webkit-text-fill-color: transparent;    -webkit-background-clip: text;    -webkit-background-size: 200% 100%;    -webkit-animation: masked-animation 4s infinite linear; } @-webkit-keyframes masked-animation {     0% { background-position: 0 0;}     100% { background-position: -100% 0;} }

說明：

1. 將漸層色設定為文字所在盒的背景色：background-image: linear-gradient(...)
2. 取文字的形狀與背景（長方形）的交集：-webkit-background-clip: text
3. 刪除覆蓋在得到交集之上的原文字形狀：-webkit-text-fill-color: transparent

background-clip 屬性規定背景的繪製地區。

文法：

background-clip: border-box|padding-box|content-box;

值對應於：背景被裁剪到邊框盒，內邊距框，內容框。
這裡用到的text只適用於chrome瀏覽器。

在經過上述步驟後得到了漸層色填充文字的效果，但實則呈現的是經過裁剪之後的背景，故要實現色彩的流動，則需要背景進行迴圈地流動，則可使用CSS3 animation迴圈改變background-position可破之，但在動畫效果上有兩坑需要注意：

• background: linear-gradient(...)是多個屬性的簡寫，在@keyframes中修改某項的值請使用具體的屬性，否則若使用簡寫則會覆蓋之前的設定。
• 初始設定背景時需要設定background-size-x>100%。讓背景圖片大小水平方向擴大一倍，這樣background-position才有移動與變化的空間。

可參考文章：《小tip:CSS3下的漸層文字效果實現》

邊框伸展效果

實現邊框伸展效果總代碼：

.border{    position: absolute;    width:300px;    height:225px;    z-index:2;    top:0;    left:0;} .border::before, .border::after {     content:" ";     display: block;     position: absolute;     width: 0;     height: 0;      box-sizing: border-box;     transition-property: height,width,left,top;     transition-duration: 0.5s;     transition-timing-function: ease-in;     z-index:2; } .border::before {     height: 100%;     left: 50%; } .wrap:hover > .border::before {     left: 0;     width: 100%;     border: 6px solid #000;     border-left-color: transparent;     border-right-color: transparent; } .border::after {     width: 100%;     top: 50%; } .wrap:hover > .border::after {     height: 100%;     top: 0;     border: 4px solid #000;     border-top-color: transparent;     border-bottom-color: transparent; }

主要通過border:6px solid #000這個屬性，當width和height都設定為100%時，把左右或上下的border設定為transparent就可以實現::after和::before拼裝成長方形，兩邊都是從中間擴充，所以最初left和top設定為50%；最後需要注意 transition-property: height,width,left,top;的設定。

最終效果：

百度網盤可下載demo運行查看，下載請點擊《CSS3動畫：流彩文字效果+圖片模糊效果+邊框伸展效果實現》

CSS3動畫：流彩文字效果+圖片模糊效果+邊框伸展效果實現