背景
用css影片讓你的頁面互動動起來
開始
<body>
<button id="button">開始</button>
<div id="block"></div>
</body>
<script>
document.getElementById("button").addEventListener("click", () => {
document.getElementById("block").setAttribute("class", "go");
});
</script>
<style>
#button {
position: absolute;
right: 10px;
top: 10px;
}
#block {
position: absolute;
background-color: pink;
left: 0px;
top: 0px;
width: 100px;
height: 100px;
}
@keyframes go {
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
.go {
animation-name: go;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
</style>
代碼其實很簡單參考https://www.runoob.com/css3/css3-animations.html
總結
- 了解影片必須弄懂2個概念，關鍵幀設定，影片時長，
- 影片時長：當你給一個元素添加了使用了animation的相關設定時，這個影片就會開始啟動，這里的時長只是方便理解（主要是說明時長非常關鍵），實際影片的配置包括，延遲開始時間，結束后是否回圈等等，具體參考檔案，
- 關鍵幀設定，是指你需要將影片時長劃分成幾個關鍵的節點（就像影片片一樣），這個關鍵的節點就是關鍵幀，每個關鍵幀有針對這個元素在當前時刻的一些配置資訊，寬、高、背景色等
- 有了關鍵幀設定和影片時長，影片就會按配置動起來，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/511081.html
標籤：其他
下一篇：針對整個檔案的Onclick事件