css3之呼吸灯效果

1、首先脑补一个知识点，我们在代码中经常看到-webkit或-moz,那这些有什么作用了，看下代码就知道了：

 -webkit-border-radius: 2px;       /*Webkit:谷歌支持：圆角*/
-moz-border-radius: 2px;          /*Mozilla:火狐支持：圆角*/
-ms-border-radius: 2px;           /*Microsoft:IE9支持：圆角*/
-o-border-radius: 2px;            /*Opera支持：圆角*/
border-radius: 2px;               /*圆角*/

2、好了，呼吸灯的原理就是修改标签的不透明度，主要利用到css3的animation动画

 <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>呼吸灯</title>
    <style type="text/css">
    /* css代码 */
    </style>
</head>
<body>
    <div class="breath_light" title="呼吸线"></div>
</body>
</html>

3、css代码是这样的：

 .breath_light {
    width: 50px;                                    /* 宽度 */
    height: 4px;                                    /* 高度 */
    opacity: 0.1;                                   /* 不透明度 */
    overflow: hidden;                               /* 溢出隐藏 */
    background: #99dd33;                            /* 背景色 */
    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; }                          /* 动画结束时的不透明度 */
}

4、学习css3：http://www.w3school.com.cn/css3/css3_animation.asp

5、不错的css3动画加载效果：http://www.cnblogs.com/lhb25/archive/2013/12/28/loading-spinners-animated-with-css3.html

转自 https://my.oschina.net/cobish/blog/303796

posted @ 2020-04-01 11:35 hanfe1 阅读(1170) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

长路漫漫唯剑作伴。

昵称： hanfe1
园龄： 6年11个月
粉丝： 67
关注： 30

+加关注

2025年3月

日

一

二

三

四

五

六

css3之呼吸灯效果

公告

长路漫漫唯剑作伴。

搜索

随笔分类

随笔档案

带佬

阅读排行榜

评论排行榜

推荐排行榜

	-webkit-border-radius: 2px; /Webkit:谷歌支持：圆角/
	-moz-border-radius: 2px; /Mozilla:火狐支持：圆角/
	-ms-border-radius: 2px; /Microsoft:IE9支持：圆角/
	-o-border-radius: 2px; /Opera支持：圆角/
	border-radius: 2px; /圆角/

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<title>呼吸灯</title>
	<style type="text/css">
	/* css代码 */
	</style>
	</head>
	<body>
	<div class="breath_light" title="呼吸线"></div>
	</body>
	</html>

	.breath_light {
	width: 50px; /* 宽度 */
	height: 4px; /* 高度 */
	opacity: 0.1; /* 不透明度 */
	overflow: hidden; /* 溢出隐藏 */
	background: #99dd33; /* 背景色 */
	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; } /* 动画结束时的不透明度 */
	}