需要准备的材料分别有：电脑、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 charset="utf-8" />
<title></title>
<style type="text/css">
.redcircle {undefined
position: absolute
margin: 52px 45px
width: 12px
height: 12px
background: #FF0000
border-radius: 50%
border: 1px solid #FF6347
}
.greencircle {undefined
position: absolute
margin: 52px 45px
width: 12px
height: 12px
background: #228B22
border-radius: 50%
border: 1px solid #3CB371
}
</html>
用css做一个呼吸效果，然后让想闪烁的元素调用：
比如，我的div想呼吸
div.breatheDiv{height:500px
width:500px
background-color: #FF94A6
border-radius: 100%
webkit-animation: breathe 2000ms ease infinite
-moz-animation: breathe 2000ms ease infinite
-o-animation: breathe 2000ms ease infinite
animation: breathe 2000ms ease infinite
}
@-webkit-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-moz-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@-o-keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
@keyframes breathe{
0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}
100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}
50%{opacity:1box-shadow:0 1px 80px #ff6b84}
}
