css3 简单的动画实现欢乐愉快的小鱼
生活随笔
收集整理的這篇文章主要介紹了
css3 简单的动画实现欢乐愉快的小鱼
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;background-color: skyblue;}.fish {width: 174px;height: 126px;background: url("./fish.png") 0px 0px no-repeat;}.fish:nth-child(1) {/* 動畫屬性 動畫名 執行時間 次數無限循環 指定步數, 動畫名 執行時間 線性過渡 無限循環; */animation: swim 1s infinite steps(11), run 7s linear infinite;}.fish:nth-child(2) {animation: swim 2s infinite steps(11), run 4s linear infinite;}.fish:nth-child(3) {animation: swim 1.2s infinite steps(11), run 6.3s linear infinite;}.fish:nth-child(4) {animation: swim 0.8s infinite steps(11), run 7.5s linear infinite;}.fish:nth-child(5) {animation: swim 1.5s infinite steps(11), run 6.7s linear infinite;}/* 動畫聲明 名字 */@keyframes swim {100% {background-position: 0px -1386px;}}@keyframes run {40% {transform: translate(1000px, 0px);}60% {transform: translate(1000px, 0px) rotate(-180deg);}80% {transform: translate(0px, 0px) rotate(-180deg);}}</style> </head> <body><div class="fish"></div><div class="fish"></div><div class="fish"></div><div class="fish"></div><div class="fish"></div></body> </html><!-- 1. 先實現一條小魚抖動尾巴（原理其實就是使用動畫改變 background-position, steps）2. 實現一條魚的游動（找到關鍵節點 40%， 60%， 80%）， 要知道關鍵節點小魚的transform參數值3. 添加多幾條小魚，給不同的小魚設置不同的動畫參數即可-->總結
以上是生活随笔為你收集整理的css3 简单的动画实现欢乐愉快的小鱼的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一周新书榜：程序员最受关注的书有这样6本
- 下一篇： 金彩教育：店铺推广要注意的小知识