文本/链接

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

面包多

超酷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. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!