css之呼吸灯效果
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; } /* 动画结束时的不透明度 */ }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。