CSS3 animate循環是一種非常有用的功能。通過使用animate循環,可以使程序產生類似于動畫的效果。animate可以創建動畫,而循環則使動畫不停地運行。這種功能可以在網站設計中發揮巨大作用,使網站的設計更加生動有趣。
.heart{ width:50px; height:50px; background-color:#ff0000; position:absolute; top:50%; left:50%; margin-left:-25px; margin-top:-30px; border-radius:50% 50% 0 0; transform:rotate(45deg); animation: rotate 2s linear infinite; } @keyframes rotate{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
上述代碼演示了如何使用CSS3 animate循環創建一個旋轉的心形。首先,定義了一個類名為heart的div,該div的寬度為50px,高度為50px,顏色為紅色,定位為絕對定位,top和left屬性設為50%表示居中。設置了邊框的圓角,使其形成心形。同時,使用了transform屬性,使之旋轉了45度。接下來定義了一個名為rotate的動畫,該動畫的開始和結束狀態分別是0度和360度的旋轉。最后,將旋轉動畫應用于heart類。使用infinite屬性,表示該動畫會一直循環。
總之,使用CSS3 animate循環可以大大提升網站的交互性和吸引力。可以在不同的元素上應用循環動畫,造出驚人的效果,在網站設計中發揮無窮的創意和想象空間。
下一篇css3 外邊框