纯css实现金鱼与鱼缸动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现金鱼与鱼缸动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; background: black; } .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .bowl { height: 200px; width: 200px; border-radius: 50%; border: 2px solid white; position: relative; animation: move 8s infinite; } @keyframes move { 0% { transform: rotate(0); } 33% { transform: rotate(-20deg); } 67% { transform: rotate(20deg); } 100% { transform: rotate(0); } } .bowl:after { content: ""; position: absolute; width: 100px; height: 26px; border-radius: 50%; background: black; border: 2px solid white; left: 50%; top: -4px; transform: translatex(-50%); z-index: 100; } .water { height: 190px; width: 190px; background: linear-gradient(to bottom, black 0% 50%, #2389da 50% 100%); border-radius: 50%; position: absolute; top: 7px; left: 7px; animation: move1 8s infinite; z-index: -100; } @keyframes move1 { 0% { transform: rotate(0); } 33% { transform: rotate(20deg); } 67% { transform: rotate(-20deg); } 100% { transform: rotate(0); } } .water:after { content: ""; position: absolute; width: 100%; height: 30px; background: #0f5e9c; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .body { width: 70px; height: 36px; background: orange;; border-radius: 40% 50% 50% 40%; bottom: 30px; right: 60px; position: absolute; } .fin { width: 40px; height: 24px; position: absolute; background: #EF8A1F; border-radius: 50%; } .fin.top { z-index: -100; transform: rotate(-20deg); left.........完整代码请登录后点击上方下载按钮下载查看
网友评论0