CSS3是一種跨平臺的樣式表語言,它可以使網站設計更加靈活。其中一個很酷的功能是使元素左右來回移動。下面我們來看一下如何實現這個效果。
/* 定義動畫關鍵幀 */ @keyframes move { 0% {left:0px;} 50% {left:200px;} 100% {left:0px;} } /* 設置元素的樣式 */ div { position:absolute; width:100px; height:100px; background-color:red; animation: move 2s linear infinite; }
如上所示,我們首先定義了一個名為move的關鍵幀,它將元素從左側移動到右側,然后再移回來。然后我們給元素設置了樣式并將動畫應用到它身上。最后,通過設置動畫的參數,我們讓它一直重復播放。
這個動畫效果非常簡單但卻很妙,能夠為你的網站帶來一些生動的感覺。如果你想要體驗一下這個動畫效果,可以將上面的代碼復制到你的CSS文件中,并在HTML文件中添加一個div元素。
上一篇html 手機翻頁代碼