效果如圖
web動(dòng)畫效果
只需要?jiǎng)?chuàng)建一個(gè)一個(gè)div
<body>
<div>我是動(dòng)畫效果</div>
</body>
CSS代碼如下
div{
width: 100px;
height: 100px;
background-color: aquamarine;
position: relative; //必須寫上相對(duì)位置，不然動(dòng)畫無(wú)效果
animation: anim 5s infinite alternate; //后面兩個(gè)代表循壞、無(wú)限替換
}
@keyframes anim {
0% {background:red;left: 0px;top: 0px}
25% {background:blue;left: 200px;top: 0px}
50% {background:#00ffff;left: 200px;top: 200px}
75% {background:#ccffcc;left: 0px;top: 200px}
100% {background:red;left: 0px;top: 0px}
}