CSS3 實現文字流光漸變動畫

EdwinPZJ 8年前發布 | 27K 次閱讀 CSS3 CSS 前端技術

來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果。

主要實現

最終效果：

http://yanyuanfe.cn/IFE-task/IFE2017/task7/index.html

實現文字的流光漸變動畫
背景圖需要進行模糊處理
實現按鈕邊框的從中間到兩邊擴展開
下面來一步步實現這些效果。

頁面結構和基礎樣式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>有趣的鼠標懸浮模糊效果</title>
</head>
<body>
<div class="container">
    <div class="box-wrapper">
        <div class="box">
         <h1 class="title">HTML5、CSS3、ES6</h1>
        </div>
    </div>

   <img class="img" src="./404_1x.png" alt="404">
</div>
</body>

</html>

style.css

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

.container {
  margin:50px auto;
  width:400px;
  height:300px;
  position: relative;
}

.box-wrapper {
  position: absolute;
  text-align: center;
  width:100%;
  height:100%;
  padding:30px;
}

.box{
  position: relative;
  width:100%;
  height:100%;
  padding-top: 80px;
}

現在我們已經實現了頁面的基本布局和樣式，container容器固定寬高，在頁面中水平居中，包含box-wrapper和img兩個盒子，box-wrapper充滿container，絕對定位使文字懸浮與圖片上面。

現在的效果如下：

實現文字的背景漸變

實現文字的流光漸變我們需要用到CSS3的 linear-gradient 繪制背景漸變效果，從左到右，這里我們需要設置0～100%的五種顏色，其中0～40%的色值與50%～100%的色值相同，并且0和100%的色值相同，這樣是為了讓流光效果如絲般順滑。

CSS linear-gradient()函數的第一個參數描述漸變線的起始點位置。它包含兩個關鍵詞：第一個指出垂直位置left or right，第二個指出水平位置top or bottom。關鍵詞的先后順序無影響，且都是可選的。

to top, to bottom, to left 和 to right這些值會被轉換成角度0度、180度、270度和90度。其余值會被轉換為一個以向頂部中央方向為起點順時針旋轉的角度。漸變線的結束點與其起點中心對稱。

.title {
  background-image: -webkit-linear-gradient(left,#D81159, #E53A40 10%, #FFBC42 20%, #75D701 30%, #30A9DE 40%,#D81159 50%, #E53A40 60%, #FFBC42 70%, #75D701 80%, #30A9DE 90%,#D81159);

}

現在可以看到文字背景的漸變效果已經出來了，但是我們需要的是文字顏色漸變的啊。

現在我們需要用到CSS3的background-clip屬性。

CSS3 background-clip:border-box|padding-box|content-box|text

用于指定background是否包含content之外的border,padding。默認值為border-box，即background從包含border在內的地方開始渲染，IE的默認表現也等同于border-box。

border-box:背景裁剪（背景從border(即包括border在內)開始繪制（渲染））;

padding-box:背景裁剪（背景從padding(即包括padding在內)開始繪制）;

content-box:背景裁剪（背景從content(即內容部分)開始繪制）;

text:背景裁剪（將背景裁剪作為文本的填充色);

（當前只有webkit內核瀏覽器支持）。

在這里，我們將使用 -webkit-background-clip:text;這個屬性來使用文字作為裁剪區域向外裁剪，此時文字的顏色將覆蓋在漸變色之上。

.title {
  background-image: -webkit-linear-gradient(left,#D81159, #E53A40 10%, #FFBC42 20%, #75D701 30%, #30A9DE 40%,#D81159 50%, #E53A40 60%, #FFBC42 70%, #75D701 80%, #30A9DE 90%,#D81159);
  -webkit-background-clip: text;
}

為了讓文字顯示漸變色，我們需要將文字顏色變為透明，此時可以使用 -webkit-text-fill-color: transparent ; 或者是 color: transparent ;

將字體顏色設置成透明，這樣就能將漸變色文字顯示出來了。

.title {
  background-image: -webkit-linear-gradient(left,#D81159, #E53A40 10%, #FFBC42 20%, #75D701 30%, #30A9DE 40%,#D81159 50%, #E53A40 60%, #FFBC42 70%, #75D701 80%, #30A9DE 90%,#D81159);
  -webkit-background-clip: text;
  color:transparent;
}

現在的效果如下。

流光動畫原理

流光動畫的原理是將文字的背景色的寬度拉長至原來的兩倍，而在 background-image 中我們設置了兩份相同的顏色組，將背景拉長之后便只顯示一份顏色組，超出背景寬度的顏色組通過動畫改變背景色的位置 background-position 來實現流光效果。

.title {
  background-image: -webkit-linear-gradient(left,#D81159, #E53A40 10%, #FFBC42 20%, #75D701 30%, #30A9DE 40%,#D81159 50%, #E53A40 60%, #FFBC42 70%, #75D701 80%, #30A9DE 90%,#D81159);
  color:transparent;
  -webkit-background-clip: text;
  background-size: 200% 100%;
}

下面通過CSS3的 animation 來實現幀動畫。

.title {
  background-image: -webkit-linear-gradient(left,#D81159, #E53A40 10%, #FFBC42 20%, #75D701 30%, #30A9DE 40%,#D81159 50%, #E53A40 60%, #FFBC42 70%, #75D701 80%, #30A9DE 90%,#D81159);
  color:transparent;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  animation: flowlight 5s linear infinite;
}


@keyframes flowlight {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

現在我們已經實現了流光動畫的效果，是不是很酷，鼠標懸浮的效果等會一起實現。

實現按鈕邊框的從中間到兩邊擴展開

這個效果主要使用了偽元素 ::before 、 ::after 來實現容器的邊框，::before設置容器的左右邊框，::after設置容器的上下邊框，偽元素邊框使用絕對定位，父容器box使用相對定位，偽元素邊框位置分別定位到相對父元素的top和left的50%，通過改變其位置和寬高來實現邊框從中間到兩邊擴展的動畫效果。

.box::before {
  content:'';
  border:3px solid #fff;
  border-width: 0 3px;
  position: absolute;
  width:100%;
  height:0;
  top:50%;
  left:0;
  box-sizing: border-box;
}


.box::after {
  content:'';
  border:3px solid #fff;
  border-width: 3px 0;
  position: absolute;
  width:0;
  height:100%;
  top:0;
  left:50%;
  box-sizing: border-box;
}

實現邊框擴展的的動畫效果，并加上過渡效果。

.container:hover .box::before{
  height:100%;
  top:0;
}

.container:hover .box::after {
  width: 100%;
  left:0;
}

.box::before {
  transition: all .8s;
}

.box::after {
  transition: all .8s;
}

背景圖的模糊處理

從最終實現我們可以看到，鼠標懸浮時背景圖會出現模糊效果，這樣的模糊效果我們可以通過CSS3的濾鏡屬性 filte r來實現。

filter：CSS濾鏡屬性，可以在元素呈現之前，為元素的渲染提供一些效果，如模糊、顏色轉移之類的。濾鏡常用于調整圖像、背景、邊框的渲染。

在這里我們需要設置 filter 的 blur 來實現對象的模糊效果。

.container:hover .img {
   filter: blur(2px);
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -ms-filter: blur(2px);
}

然而，加上之后我們的文字和邊框哪兒去了？這是因為圖片把文字和邊框覆蓋了，這里我們需要設置 box-wrapper 容器的 z-index 屬性，來凸顯各個容器的層級。

.box-wrapper {
  position: absolute;
  text-align: center;
  width:100%;
  height:100%;
  padding:30px;
  z-index: 99;
}

這樣，背景模糊的效果就實現了。

優化細節

細心的你可能注意到，在鼠標懸浮的時候，文字會一個上移的效果還沒實現，下面來實現它。

文字上移的效果我們通過CSS3的變換屬性來實現，默認我們將文字向下位移，鼠標懸浮時我們再將其置0就OK了。

.title {
  background-image: -webkit-linear-gradient(left,#D81159, #E53A40 10%, #FFBC42 20%, #75D701 30%, #30A9DE 40%,#D81159 50%, #E53A40 60%, #FFBC42 70%, #75D701 80%, #30A9DE 90%,#D81159);
  color:transparent;
  -webkit-background-clip: text;
  background-size: 200%;
  transform: translate(0,20px);
  animation: flowlight 5s linear infinite;
}

通過 translate 將文字向下位移20px。

.container:hover .title{
  transform: translate(0);
}

鼠標懸浮時取消位移。

最后，我們的顯示隱藏效果還沒實現。這里，我們通過設置透明度 opacity 來實現顯示隱藏，設置 transtion 來實現過渡效果。

.box{
  opacity: 0;
  transition: opacity .8s;
}


.title {
  transition: transform .8s,opacity .8s;
}

.container:hover .box{
  opacity: 1;
}

.container:hover .title{
  opacity: 1;
}

現在，我們已經實現了所有的動畫效果，看起來還是不錯吧，CSS3完成動畫效果的能力還是很強大的吧。

總結

本文用到的CSS3屬性：

linear-gradient
webkit-background-clip
-webkit-text-fill-color
animation
transform
transition
filter

由于CSS3的兼容性，在完成此效果時，只在Chrome瀏覽器進行測試，如需兼容其他瀏覽器，請自行加上瀏覽器前綴。

來自：http://yanyuanfe.cn/2017/03/18/CSS3實現文字流光漸變動畫/

本文由用戶 EdwinPZJ 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1490169357167.html

CSS3 CSS 前端技術