您现在的位置是：首页 >技术交流 >css呼吸灯网站首页技术交流

css呼吸灯

Rain2022111 2024-06-17 10:48:33
简介css呼吸灯

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>
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐