原图:
## 让文字带有闪烁效果
HTML源代码:
<li class="shansuo">
<a href=""" class="gsgw">公司官网</a>
<span>股票代码:</span>
<span >603888</span>
</li>
Css:
.gsgw{
padding-left: 10px;
}
.shansuo span{
padding-left: 10px;
color: #1978bd;
}
.shansuo span:nth-child(2){
color: #1978bd;
font-size: 14px;
font-weight: 600;
font-family: Arial;
}
@keyframes blink{
0%{opacity: 1;}
100%{opacity: 0;}
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% {opacity: 1; }
100% { opacity: 0;}
}
@-o-keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; }
}
.shansuo{
/* 定义blink类*/
animation: blink 3s linear infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
}
设置闪烁时间和动画效果。