css动画--呼吸灯

最新推荐文章于 2023-11-09 14:53:54 发布

根根呀

最新推荐文章于 2023-11-09 14:53:54 发布

阅读量290

点赞数

分类专栏：个人笔记前端开发

本文链接：https://blog.csdn.net/qq_45204987/article/details/98776748

版权

这篇博客探讨了如何使用CSS动画技巧创建一个仿照呼吸灯效果的视觉效果。虽然目前存在一些不足，博主计划在未来进行改进。

摘要由CSDN通过智能技术生成

本作品有瑕疵，以后时间在修改！！！
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
    
            border: 0;
            padding: 0;
            list-style: none;
        }
        div{
    
            box-sizing: border-box;
        }
        .content{
    
            width: 300px;
            height: 500px;
            background-color: #999999;
            margin: 0 auto;
        }
        .content>.bot{
    
            padding: 30px;
            height: 300px;



            animation-name: x;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: 4s;
        }
        .content>.bot>.Circle{
    
            height: 100%;
            border: 5px solid lawngreen;
            border-radius: 50%;
            padding: 30px;



            animation-name: y;
            animation-timing-function:</