纯css样式实现炫彩字体

袖白雪

1.   //炫彩动画LOGO
   
2. <style type="text/css">
   
3.             #logo {
   
4.                 font-weight: 600;
   
5.                 font-size: 28px;
   
6.                 font-family: "黑体";
   
7.                 color: #8c888b;
   
8.                 background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5),
   
9.                 -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5),
   
10.                 -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    
11.                 color: transparent;
    
12.                 /*设置字体颜色透明*/
    
13.                 -webkit-background-clip: text;
    
14.                 /*背景裁剪为文本形式*/
    
15.                 animation: ran 10s linear infinite;
    
16.                 /*动态10s展示*/
    
17.             }
    
18. 
    
19.             @keyframes ran {
    
20.                 from {
    
21.                     backgroud-position: 0 0;
    
22.                 }
    
23.                 to {
    
24.                     background-position: 2000px 0;
    
25.                 }
    
26.             }
    
27.         </style>

复制代码

HTML部分

1. <a class="navbar-brand" id="logo" href="#">这里字体炫彩动画</a>

复制代码