代码拉取完成,页面将自动刷新
<!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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。