CSS3動畫之流彩文字效果+圖片模糊效果+邊框伸展效果實現(xiàn)代碼合集
我要評論前言
首先第一步，先布局html代碼如下：
<div class="wrap">
<img src="images/1.jpg" class="blur"/>
<div class="text-gradient ">天賜神功</div>
<div class="border"></div>
</div>
上面一看第一個圖片img 就是實現(xiàn)圖片模糊效果的DOM元素，text-gradient實現(xiàn)的是流彩文字效果的DOM元素，border實現(xiàn)的是邊框伸展效果的DOM元素
想一想樣式該咋寫呢，根據(jù)這個布局，我們先來實現(xiàn)圖片模糊效果。
圖片模糊效果
先寫下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濾鏡實現(xiàn)代碼如下：
.blur {
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
SVG濾鏡實現(xiàn)：
不管倒騰什么方法，搞一個代碼如下，且全名為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調(diào)用代碼：
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
然后，效果就出來了。如果你手上的瀏覽器是FireFox25-就能看到效果。
IE10以及IE11以及以后的IE11+都是支持SVG的濾鏡的，但是，此demo在這些瀏覽器下是無效的，為何？
好像因為其不支持直接在CSS使用使用filter: url的寫法，其實，要想實現(xiàn)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模糊濾鏡實現(xiàn)，如下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 */
}
流彩文字效果
先上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;}
}
說明：
將漸變色設(shè)置為文字所在盒的背景色：background-image: linear-gradient(...)
取文字的形狀與背景（長方形）的交集：-webkit-background-clip: text
刪除覆蓋在得到交集之上的原文字形狀：-webkit-text-fill-color: transparent
background-clip 屬性規(guī)定背景的繪制區(qū)域。
語法：
background-clip: border-box|padding-box|content-box;
值對應(yīng)于：背景被裁剪到邊框盒，內(nèi)邊距框，內(nèi)容框。
這里用到的text只適用于chrome瀏覽器。
在經(jīng)過上述步驟后得到了漸變色填充文字的效果，但實則呈現(xiàn)的是經(jīng)過裁剪之后的背景，故要實現(xiàn)色彩的流動，則需要背景進行循環(huán)地流動，則可使用CSS3 animation循環(huán)改變background-position可破之，但在動畫效果上有兩坑需要注意：
background: linear-gradient(...)是多個屬性的簡寫，在@keyframes中修改某項的值請使用具體的屬性，否則若使用簡寫則會覆蓋之前的設(shè)置。
初始設(shè)置背景時需要設(shè)置background-size-x>100%。讓背景圖片大小水平方向擴大一倍，這樣background-position才有移動與變化的空間。
邊框伸展效果
實現(xiàn)邊框伸展效果總代碼：
.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都設(shè)置為100%時，把左右或上下的border設(shè)置為transparent就可以實現(xiàn)::after和::before拼裝成長方形，兩邊都是從中間擴展，所以最初left和top設(shè)置為50%；最后需要注意 transition-property: height,width,left,top;的設(shè)置。
最終效果如圖所示：
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持!
相關(guān)文章
這篇文章主要介紹了CSS3 按鈕邊框動畫的實現(xiàn)，幫助大家更好的理解和使用CSS3，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-12- 這篇文章主要介紹了一款效果非常炫酷的CSS3按鈕邊框動畫特效,按鈕的邊框會以不同的方式進行各種動畫，感興趣的小伙伴們可以參考一下2016-03-16
- 這篇文章主要介紹了利用SVG和CSS3來實現(xiàn)一個炫酷的邊框動畫,不使用JavaScript使得編寫過程輕松了不少,需要的朋友可以參考下2015-07-22
現(xiàn)如今網(wǎng)頁越來越趨近于動畫，相信大家平時瀏覽網(wǎng)頁或多或少都能看到一些動畫效果，今天我們做一個通過 css3 鼠標滑過實現(xiàn)動畫線條邊框，下面一起看看吧2023-02-22
