CSS之呼吸灯

最新推荐文章于 2024-12-17 20:26:34 发布

学、写、用

最新推荐文章于 2024-12-17 20:26:34 发布

阅读量800

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/zbzuikeai/article/details/107733408

版权

本文介绍了如何使用CSS创建一个有趣的呼吸灯小程序。通过设置五个div，包括一个整体div，两个大div（上下结构），上面的大div再分为两个小div形成圆形。关键技巧包括使用border-radius实现圆角，设置为怪异盒子模式以用padding调整圆之间的间距，为后续动态缩放做准备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS实例之呼吸灯小程序

最近学css看见一个挺有趣的小程序呼吸灯，它的静态是这样子的
在这里插入图片描述
如果有能力可以让它动态化，现在就将它静态页面的程序说一说。
首先设置五个div，首先是一个整体的div，然后先分上下两个大的，下面的div写文字，上面的div再细分为两个小的div作为如图上的两个圆。
具体代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
   
            box-sizing: border-box;
        }

最低0.47元/天解锁文章