超酷CSS3模糊发光文字动画效果

创客云


这是一款CSS3超酷模糊发光文字动画特效。该特效通过简单的CSS代码来实现文字的模糊和发光动画效果。

HTML结构

页面布局的HTML结构如下。

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <div class="text-effect">
  5.                 <span>Best jQuery</span>
  6.             </div>
  7.         </div>
  8.     </div>
  9. </div>

CSS样式

然后添加下面的CSS样式。

  1. .text-effect{
  2.     color: #fff;
  3.     font-family: 'Frijole', cursive;
  4.     font-size: 80px;
  5.     text-transform: uppercase;
  6.     text-align: center;
  7.     letter-spacing: 8px;
  8.     margin: 30px auto 0;
  9.     animation: 4s animate infinite linear;
  10. }
  11. @keyframes animate{
  12.     0%{ text-shadow: 0 0 0 white; }
  13.     40%{
  14.         color: rgba(255,255,255,0);
  15.         text-shadow: 0 0 30px white;
  16.     }
  17.     70%{
  18.         color: rgba(255,255,255,0.4);
  19.         text-shadow: 0 0 10px white;
  20.     }
  21.     90%{
  22.         color: rgba(255,255,255,0.6);
  23.         text-shadow: 0 0 30px white;
  24.     }
  25.     100%{ text-shadow: 0 0 40px rgba(255,255,255,0); }
  26. }
  27. @media only screen and (max-width: 990px){
  28.     .text-effect{ font-size: 80px; }
  29. }
  30. @media only screen and (max-width: 767px){
  31.     .text-effect{ font-size: 40px; }
  32. }
  33. @media only screen and (max-width: 479px){
  34.     .text-effect{ font-size: 30px; }
  35. }
  36. @media only screen and (max-width: 359px){
  37.     .text-effect{ font-size: 25px; }
  38. }
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/45716.html
云模板

发表评论