小白学编程(CSS)：呼吸灯

先上效果：

CSS特效：会呼吸的灯

HTML代码：

<body>
    <div class="boxs">
        <div class="box">
            <span class="world">呼吸灯span>
        div>
    div>
body>
1
2
3
4
5
6
7

html代码并不复杂，主要由四部分组成：
1.body元素：最外层的画布。
2.类名为boxs的div元素：发光的圆。
3.类名为box的div元素：黑色背景的圆，用于遮盖发光圆的中间部分。
4.类名为world的span元素：在黑色圆上添加文字。

第一步：清除元素自带的边距。

   *{
   
            margin:0;
            padding:0;
        }
1
2
3
4
5

第二步：设置画布。
1.背景颜色设置为黑色。
2.设置相对定位。

 body{
   
            background:black;
            position:relative;
        }
1
2
3
4
5

第三步：设置发光的圆。
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:100px1
2
3

相关阅读:
面试官: 线程池是如何做到线程复用的？有了解过吗，说说看
进入Web3.0的元宇宙新纪元,科技巨头争先“跑马圈地”
vue3之pinia简单使用
css动画基本使用
1130 - Host ‘192.168.10.10‘ is not allowed to connect to this MysOL server
前端的ElementUI表格里面的编辑前后的值的获取
两个部门，六轮面试，终与字节无缘
顺丰01. 顺丰鄂州枢纽运转中心环线检测
Docker实践：使用Docker搭建个人开发环境（极简版）
python常见的数据类型

原文地址：https://blog.csdn.net/qq_40924992/article/details/128186418