css鱼儿游动加速动画效果代码-html代码-BFW代码库

css鱼儿游动加速动画效果代码

代码语言：html

所属分类：动画

代码描述：css鱼儿游动加速动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
   *{box-sizing:border-box}*:focus,*:active,*:focus:active{outline:0}body{background:deepskyblue}#toggleSpeed{background:tomato;border:0;border-radius:.6em;bottom:0;box-shadow:0 -0.08em 0 0 #ffa494,0 .3em 0 0 shade(tomato,8%);color:white;margin:.5em 5vw;padding:1em 2em 1.2em;position:fixed;width:90vw}.fish{-webkit-animation:fish .8s ease-in-out infinite alternate;animation:fish .8s ease-in-out infinite alternate;font-size:10px;left:50%;perspective:600px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);z-index:1}.fish .body,.fish .fins{height:7em;position:absolute;transform:translateX(-50%) translateY(-50%);width:12em}.fish .body{background:darkorange;border-radius:50%;box-shadow:inset .3em -0.5em 0 0 shade(darkorange,10%)}.fish .body:before,.fish .body:after{border-radius:35%/50%;box-shadow:-0.1em .05em 0 0 shade(darkorange,30%),-0.1em .05em .1em 0 rgba(0,0,0,0.1);content:"";height:3em;left:7.5em;position:absolute;top:1.7em;transform:rotate(-6deg);width:1em}.fish .body:after{height:2.8em;left:6.7em;top:1.8em;transform:rotate(-8deg)}.fish .fins div{position:absolute;z-index:-1}.fish .fins .top{-webkit-animation:finTop 1.2s linear infinite alternate;animation:finTop 1.2s linear infinite alternate;border-radius:0 100% 0 0;box-shadow:2.5em 1em 1em 0 rgba(0,0,0,0.1),3em .5em 0 0 orange;height:3em;left:0;top:-2.25em;transform:rotateZ(-5deg);transform-origin:7.5em bottom;width:5em}.fish .fins .bottom{-webkit-animation:finBottom 1.2s linear infinite alternate;animation:finBottom 1.2s linear infinite alternate;border-radius:0 0 100%;bottom:-1.4em;box-shadow:2em -0.3em 0 0 rgba(0,0,0,0.1),2em -0.3em 0 0 orange;height:2em;left:2em;transform:rotateZ(5deg);transform-origin:5.5em top;width:3.5em}.fish .fins .bottom+.bottom{bottom:-0.4em;box-shadow:2em -0.5em 0 0 rgba(0,0,0,0.1),2em -0.5em 0 0 orange;height:1.5em;left:0;transform:rotateZ(10deg);width:2.5em}.fish .tail{-webkit-animation:tailSlow 1.2s ease-in-out infinite alternate;animation:tailSlow 1.2s eas.........完整代码请登录后点击上方下载按钮下载查看