css实现带水泡的鱼儿游动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现带水泡的鱼儿游动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #42a1c6; } /* Franklin's Container */ .fish { width: 150px; height: 100px; -webkit-animation: swim 3s infinite; animation: swim 3s infinite; } /* Franklin */ .fish-body { position: relative; margin-top: 30px; margin-left: 40px; background-color: orange; border-radius: 50%; width: 150px; height: 100px; } .eye { position: absolute; margin-left: 100px; margin-top: 20px; z-index: 1; background-color: white; border-radius: 50%; width: 20px; height: 20px; } .pupil { position: absolute; z-index: 2; margin-left: 5px; margin-top: 5px; background-color: black; border-radius: 50%; height: 10px; width: 10px; } .fin { margin-top: -100px; background-color: orange; border-radius: 50%; transform: rotate(40deg); width: 80px; height: 50px; } .fin-bottom { margin-top: -10px; transform: rotate(-40deg); } /* Bubbles */ .bubbles { position: absolute; bottom: 0; z-index: 5; margin-right: 50px; background-color: white; border-radius: 50%; opacity: .50; width: 40px; height: 40px; -webkit-animation: up 4s infinite; animation: up 4s infinite; } .bubble-2 { left: 350px; -webkit-animation: up 2s infinite; animation: up 2s infinite; } .bubble-3 { left: 750px; opacity: .30; -webkit-animation: up 5s infinite; animation: up 5s infinite; } .bubble-4 { left: 1150px; -webkit-animation: up 6s infinite; animation: up 6s infinite; } .bubble-5 { left: 50px; -webkit-animation: up 5s infinite; animation: up 5s infinite; } .bubble-6 { left: 300px; opacity: .30; -webkit-animation: up 3s infinite; animation: up 3s infinite; } .bubble-7 { left: 670px; -webkit-animation: up 4s infinite; animation: up 4s infinit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0