CSS3動畫可以制作令人驚嘆的交互體驗,同時也可以為網站增添趣味性。其中最有趣的應該就是制作卡通動畫了。
在CSS3動畫中,我們可以通過關鍵幀(keyframe)來控制元素的樣式屬性的變化方式。在卡通動畫中,我們需要用到幀的概念,因為卡通動畫是由一個個靜止的畫面組成的。
以下是一個制作卡通圖片的示例代碼,使用了CSS3動畫、關鍵幀,實現了圖片向左運動的效果:
.cartoon-img{ width: 100px; height: 100px; position: relative; animation: move 3s infinite; } @keyframes move { 0% { left: 0px; } 50% { left: 300px; } 100% { left: 0px; } }
通過以上代碼,你可以制作出一個卡通圖片動畫,讓你網站的頁面更有趣、更生動。而這只是CSS3動畫的冰山一角,更加有趣的CSS3動畫效果等待你去探索。
上一篇anamiate.css
下一篇css3動畫顯示div