css呼吸灯
CSS中animation动画
Animations由两部分组成：
- css动画的配置；
- animation-name ：xx （设置关键帧的名称为xx）；
- animation-duration：1s （动画持续时间为1s）；
- animation-timing-function： linear （动画时间曲线：linear、ease（默认）、ease-in 、ease-out、ease-in-out、cubic-bezier(n,n,n,n) ） 。
- animation-delay:2s (动画等待2后开始)；
- animatiom-iteration-count：infinite （动画播放次数）；
- animation-direction：alternate（设置动画播放形式，规定动画是否在下一周期逆向地播放 nomal、reverse ）；
- animation-fill-mode： （动画结束的最后一帧，规定对象动画时间之外的状态）；
- animation-play-state： （设置动画是否暂停）；
- keyframes关键帧：一系列的keyframes（用来描述动画的开始、过程、结束状态）；
- from to：
- 百分比：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>呼吸灯</title>
<style>
.btn-group{
width: 100px;
height: 100px;
}
.box{
width: 100px;
height: 100px;
border: 1px solid #333;
}
.breath{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #333;
border-radius: 50%;
position: relative;
}
.breath .transcribe{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #333;
border-radius: 50%;
background-color: red;
animation: myMove 1s linear infinite;
animation-play-state:running;
}
.breath .transcribe:hover{
background-color:green;
/* animation-play-state:paused; */
}
@keyframes myMove {
0% {
opacity: 1;
/* visibility:visible; */
}
25% {
opacity: 0;
/* visibility:visible; */
}
100% {
opacity: 0;
/* visibility: hidden; */
}
}
</style>
</head>
<body>
<div class="btn-group">
<button onclick="pause()">暂停</button>
<button onclick="start()">开始</button>
</div>
<div class="box">
<span class="breath">
<span class="transcribe"></span>
</span>
</div>
</body>
</html>
<script type="text/javascript">
function pause () {
let ele = document.querySelector('.transcribe')
console.log("pause", ele);
ele.style.animationPlayState = "paused"
}
function start () {
let ele = document.querySelector('.transcribe')
console.log("start", ele);
ele.style.animationPlayState = "running"
}
function shouldResize() {
console.log("current", window.innerWidth, window.innerHeight);
}
function shouldLoad(){
console.log("onload");
}
window.addEventListener("resize", shouldResize)
window.addEventListener("load", shouldLoad)
</script>