需要准备的材料分别有:电脑、chrome浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:
@keyframes blink{
0%{opacity: 1}
100%{opacity: 0}
}
@-webkit-keyframes blink {
0% { opacity: 1}
100% { opacity: 0}
}
.blink{
color: #dd4814
animation: blink 1s linear infinite
-webkit-animation: blink 1s linear infinite
}
3、浏览器运行index.html页面,此时文字实现了闪烁的效果。
css过滤动画图片变大后闪不停,将三个图片整合为一张图片可以改善。这样可以同时将三张图片一起加载,就不会出现闪烁的问题了,然后再通过background-position来切换要显示的图片的位置,这种技术叫做图片整合技术。