CSS進階篇--CSS3實現流彩文字效果+圖片模糊效果+邊框伸展效果實現

前言

首先第一步，先佈局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;}
 }

說明：

• 將漸變色設置爲文字所在盒的背景色：background-image: linear-gradient(...)
• 取文字的形狀與背景（長方形）的交集：-webkit-background-clip: text
• 刪除覆蓋在獲得交集之上的原文字形狀：-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動畫：流彩文字效果+圖片模糊效果+邊框伸展效果實現》