CSS3動畫是CSS的一種擴展語言,為網頁開發提供了更加靈活、生動、高效的效果展示手段。掘金是一家提供技術文章分享的平臺,它也提供了很多關于CSS3動畫的技術文章和實戰案例。
/* 這是一個使用掘金網站中的一個案例 */ /* 鼠標移入時,盒子右移,改變背景色和背景圖 */ .box{ transition: all .3s ease-in-out; /* 動畫過渡效果 */ background: url('old-img.jpg') no-repeat; background-size: cover; background-position: center; height: 300px; width: 400px; } .box:hover{ transform: translateX(150px); /* 盒子向右平移150px */ background: url('new-img.jpg') no-repeat; background-size: cover; background-position: center; }
這是一個簡單的CSS3動畫案例,通過鼠標移入盒子的方法,改變了盒子的位置和背景圖。在CSS3動畫中,還有很多技巧和高級應用,比如可以通過關鍵幀、動畫隊列、動畫延遲、動畫重復等方式實現復雜的效果,可以構建更加生動而有趣的頁面。
上一篇css跨瀏覽器兼容性