CSS3動畫的出現讓我們的網頁更加生動化，更具吸引力，今天我們將會演示一個簡單的CSS3動畫短視頻。我們將會使用pre標簽來展示我們的代碼。
<html>
<head>
<title>CSS3動畫短視頻</title>
<style>
#animation {
width: 400px;
height: 400px;
background-color: #f00;
position: relative;
animation-name: shift;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes shift{
0% {top: 0px; left: 0px;}
25% {top: 0px; left: 300px;}
50% {top: 300px; left: 300px;}
75% {top: 300px; left: 0px;}
100% {top: 0px; left: 0px;}
}
</style>
</head>
<body>
<div id=”animation”></div>
</body>
</html>以上代碼描述了一個紅色的正方形，在3秒鐘內將按照設定曲線圖進行移動，重復無限次，以使動畫連續播放。
接下來，我們將給出預測播放的CSS3動畫短視頻的效果展示。
視頻中：紅方塊重復地運行了一個長方形的路徑，總是朝向變化方向運行以形成一個無限的環形圖形。這個動畫方便用于產生一個旋轉的感覺，并最終創造一個有趣的效果。
現在讓我們來總結一下！這篇文章介紹了我們如何創建一個無限重復播放的CSS3動畫，它的作用是讓網站更加生動有趣。我們還展示了我們的代碼，并使用預測視頻來展示效果。希望你們喜歡這篇文章，并能夠從中了解更多CSS3動畫相關知識。
上一篇css shrinks
下一篇css span背景色