CSS3特效 - 呼吸灯效果

最新推荐文章于 2024-05-15 12:08:15 发布

草巾冒小子

最新推荐文章于 2024-05-15 12:08:15 发布

阅读量1.3w

点赞数 2

分类专栏： CSS 3 HTML 5

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/83113826

版权

CSS 3 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

HTML 5

33 篇文章 3 订阅

订阅专栏

CSS3特效 - 呼吸灯效果

1. 效果图

在这里插入图片描述

2. 代码如下

<!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: 3s;                         /* 动画时长3秒 */
    animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;            /* 播放次数：无限 */
 
    /* Safari and Chrome */
    -webkit-animation-name: breath;                 /* 动画名称 */
    -webkit-animation-duration: 3s;                 /* 动画时长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 class="breath_light" title="呼吸灯"></div>
</body>
</html>

以上就是关于“ CSS3特效 - 呼吸灯效果 ” 的全部内容。

草巾冒小子

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
CSS3特效 - 呼吸灯效果

1. 效果图2. 代码如下&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"/&gt; &lt;title&gt;呼吸灯&lt;/title&gt; &lt
复制链接

扫一扫