小白学编程(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

相关阅读:
easyx库的学习(鼠标信息)
线性代数学习笔记7-4：马尔可夫矩阵、矩阵幂的稳态问题
架构师04-应用服务间加密设计和实践
跳动的爱心（可改颜色）
数据结构-顺序表详解（含完整代码）
Typescript-----接口
2023年09月 Python（一级）真题解析#中国电子学会#全国青少年软件编程等级考试
Faster R-CNN，YoloV1，YoloV2
指针数组概念
Python Linux下编译

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