css图片呼吸灯demo

最新推荐文章于 2025-05-19 10:39:24 发布

zhan_lijian

最新推荐文章于 2025-05-19 10:39:24 发布

阅读量707

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/zhan_lijian/article/details/109451683

css 专栏收录该内容

2 篇文章

订阅专栏

此博客展示了CSS图片呼吸灯的demo，利用CSS技术实现图片类似呼吸灯的效果，属于前端开发中利用CSS进行可视化呈现的内容。

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>呼吸灯</title>
    <style type="text/css">
    /* css代码 */
    .breath_light {
    /*width: 300px;  */                                  /* 宽度 */
    /*height: 300px; */                                   /* 高度 */
    /*border:#666 1px solid;*/
    /*border-radius:50%;*/
    opacity: 0.1;                                   /* 不透明度 */
    overflow: hidden;                               /* 溢出隐藏 */
    background:#FF3;                            /* 背景色 */
   /* margin: 25% auto; */                              /* 外边距 */
  
    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: breath;                         /* 动画名称 */
    animation-duration: 700ms;                         /* 动画时长3秒 */
    animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;            /* 播放次数：无限 */
 
    /* Safari and Chrome */
    -webkit-animation-name: breath;                 /* 动画名称 */
    -webkit-animation-duration: 700ms;                 /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
}
 
@keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */    
}
 
@-webkit-keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}
    </style>
</head>
<body>
    <div  title="呼吸灯">
        <img class="breath_light" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" style="height: 60px;width: 60px;" />
    </div>
</body>
</html>