@-webkit-keyframes twinkling{
0%{
opacity:0 /
}
100%{
opacity:1
}
}
.twink_btn{
-webkit-animation: twinkling 1s infinite ease-in-out
}
```
需要准备的材料分别有：电脑、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页面，此时文字实现了闪烁的效果。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8"/>
<style type="text/css">
body{
text-align: center
line-height: 500px
}
.animated {
-webkit-animation-duration: 1s
animation-duration: 1s
-webkit-animation-fill-mode: both
animation-fill-mode: both
}
.animated.infinite {
/*-webkit-animation-iteration-count: infinite*/
/*animation-iteration-count: infinite*/
}
.flash {
width: 100px
height: 100px
border-radius: 50%
display: inline-block
background: #f00
-webkit-animation-name: flash
animation-name: flash
}
@-webkit-keyframes flash {
0%,100%,50% {
opacity: 1
}
25%,75% {
opacity: 0
}
}
@keyframes flash {
0%,100%,50% {
opacity: 1
}
25%,75% {
opacity: 0
}
}
</style>
</head>
<body>
<div class="flash animated infinite"></div>
</body>
</html>
