先上效果：
CSS特效：会呼吸的灯
HTML代码：
<body>
<div class="boxs">
<div class="box">
<span class="world">呼吸灯</span>
</div>
</div>
</body>
html代码并不复杂，主要由四部分组成：
1.body元素：最外层的画布。
2.类名为boxs的div元素：发光的圆。
3.类名为box的div元素：黑色背景的圆，用于遮盖发光圆的中间部分。
4.类名为world的span元素：在黑色圆上添加文字。
第一步：清除元素自带的边距。
*{
margin:0;
padding:0;
}
第二步：设置画布。
1.背景颜色设置为黑色。
2.设置相对定位。
body{
background:black;
position:relative;
}
第三步：设置发光的圆。
1.设置高为100像素。
2.设置宽为100像素。
3.设置背景颜色为白色。
(现在我们可以在浏览器上看见一个100x100的白色正方形)。如下图：
4.设置正方形角的弧度为50%(如果四个角的弧度都是50%,我们就可以得到一个圆)。
5.设置盒子阴影：0（横向） 0（纵向） 15px(模糊度) rgb(255,255,255)(颜色)
6.设置绝对定位。
7.设置相对于body元素的位置。只有距离顶部是304px,其他设置为0.
8.设置居中显示。
（补充：margin:上 右 下 左；）
9.设置通明度为0.4。
10.设置动画属性：mymove（动画名称） 10s（周期持续时间） ease-in-out（以低速开始和结束） infinite（无限循环播放） alternate（动画结束后，从结束的地方反向播放）
.boxs{
height:100px;
width:100px
最低0.47元/天 解锁文章
2379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
