css呼吸灯-Toy模板网

这篇具有很好参考价值的文章主要介绍了css呼吸灯。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css呼吸灯

CSS中animation动画

Animations由两部分组成：文章来源地址https://www.toymoban.com/news/detail-449918.html

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>