css呼吸燈
CSS中animation動畫
Animations由兩部分組成：文章來源地址http://www.zghlxwxcb.cn/news/detail-449918.html
- css動畫的配置；
- animation-name ：xx （設(shè)置關(guān)鍵幀的名稱為xx）；
- animation-duration：1s （動畫持續(xù)時間為1s）；
- animation-timing-function： linear （動畫時間曲線：linear、ease（默認(rèn)）、ease-in 、ease-out、ease-in-out、cubic-bezier(n,n,n,n) ） 。
- animation-delay:2s (動畫等待2后開始)；
- animatiom-iteration-count：infinite （動畫播放次數(shù)）；
- animation-direction：alternate（設(shè)置動畫播放形式，規(guī)定動畫是否在下一周期逆向地播放 nomal、reverse ）；
- animation-fill-mode： （動畫結(jié)束的最后一幀，規(guī)定對象動畫時間之外的狀態(tài)）；
- animation-play-state： （設(shè)置動畫是否暫停）；
- keyframes關(guān)鍵幀：一系列的keyframes（用來描述動畫的開始、過程、結(jié)束狀態(tài)）；
- 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>
文章來源：http://www.zghlxwxcb.cn/news/detail-449918.html
到了這里，關(guān)于css呼吸燈的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
