CSS3花屏文字效果

admin發表於2018-07-12
CSSS3

分享一段程式碼例項，它模擬實現了類似花屏的文字效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
.filter{
  position:relative;
  width:300px;
  margin:50px auto;
  font-size:36px;
  font-family:Raleway, Verdana , Arial;
}
.white{
  position:absolute;
  left:0;
  top:15px;
  width:100%;
  height:3px;
  background:#fff;
  z-index:4;
  animation:whiteMove 3s ease-out infinite;
}
.filter:before{
  content:attr(data-word);
  position:absolute;
  top:0;
  left:0.5px;
  height:0px;
  color:rgba(0,0,0,.9);
  overflow:hidden;
  z-index:2;
  animation:redShadow 1s ease-in infinite;
  -webkit-filter:contrast(200%);
  text-shadow:0.1px 0 0 red;
}
.filter:after{
  content:attr(data-word);
  position:absolute;
  top:0;
  left:-3px;
  height:36px;
  color:rgba(0,0,0,.8);
  overflow:hidden;
  z-index:3;
  background:rgba(255,255,255,.9);
  animation:redHeight 1.5s ease-out infinite;
  -webkit-filter:contrast(200%);
}
@keyframes redShadow{
  20%{
    height:32px;
  }
  60%{
    height:6px;
  }
  100%{
    height:42px;
  }
}
@keyframes redHeight{
  20%{
    height:42px;
  }
  35%{
    height:12px;
  }
  50%{
    height:40px;
  }
  60%{
    height:20px;
  }
  70%{
    height:34px;
  }
  80%{
    height:22px;
  }
  100%{
    height:0px;
  }
}
@keyframes whiteMove{
  8%{
    top:38px;
  }
  10%{
    top:8px;
  }        
  12%{
    top:42px;
  }        
  99%{
    top:36px;
  }
}
</style>  
</head>  
<body >  
<div class='filter' data-word='螞蟻部落'>
  螞蟻部落
  <div class='white'></div>
</div>
</body>  
</html>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.animation參閱CSS3 animation一章節。

（2）.content參閱css content一章節。

（3）.rgba參閱CSS3 RGBA一章節。

（4）.filter參閱css3 filter屬性一章節。

（5）.@keyframes可以參閱CSS3 @keyframes一章節。

相關文章