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

代码语言：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 ease-in-out infinite alternate;border-radius:50%;box-shadow:2.5em .5em 1em -1em rgba(0,0,0,0.1),2.5em 0 0 0 orange,2.75em -0.15em 0 .05em darkorange,2.8em .1em 0 .1em #cc7000;height:9em;left:-15.8em;position:absolute;top:-5.5em;transform:skewX(7deg);transform-origin:10em center;transform-style:preserve-3d;width:7em}.fish .side{-webkit-animation:sideFinSlow 3.2s linear infinite alternate;animation:sideFinSlow 3.2s linear infinite alternate;border-bottom:.4em solid transparent;border-left:2em solid orange;border-top:.4em solid transparent;border-radius:.4em;box-shadow:inset -1.5em -0.5em 4em 0 rgba(0,0,0,0.7);height:2em;left:-2.5em;position:absolute;top:-1em;transform:rotate(-8deg);transform-origin:2em center;transform-style:preserve-3d;width:0}.fish .side:before{background:shade(orange,5%);border-radius:.4em 100% 0 .4em;box-shadow:-0.2em .2em .5em 0 rgba(0,0,0,0.1);content:"";height:1.1em;left:-1.7em;position:absolute;transform:skewY(-10deg);width:1.7em}.fish .side:after{background:orange;border-radius:50%;content:"";height:1.2em;left:-0.3em;position:absolute;width:.6em}.fish .eye{-webkit-animation:eye 4s linear infinite;animation:eye 4s linear infinite;background:black;border-radius:50%;box-shadow:inset .35em 0 0 .5em white;height:2em;left:2.5em;position:absolute;top:-1.5em;width:2em;z-index:10}.fish .bubbles .bubble{-webkit-animation:bubbleOne 3s ease-in infinite;animation:bubbleOne 3s ease-in infinite;border-radius:50%;box-shadow:inset 0 0 .5em 0 rgba(255,255,255,0.5);height:2em;left:5.8em;position:absolute;top:-1em;transform:scale(0);transform-origin:left center;width:2em}.fish .bubbles .bubble:nth-child(4n-1){-webkit-animation-name:bubbleTwo;animation-name:bubbleTwo;-webkit-animation-delay:.8s;animation-delay:.8s;-webkit-animation-duration:3.3s;animation-duration:3.3s}.fish .bubbles .bubble:nth-child(4n-2){-webkit-animation-name:bubbleThree;animation-name:bubbleThree;-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-animation-duration:3.15s;animation-duration:3.15s}.fish .bubbles .bubble:nth-child(4n-3){-webkit-animation-name:bubbleFour;animation-name:bubbleFour;-webkit-animation-delay:2.2s;animation-delay:2.2s;-webkit-animation-duration:2.85s;animation-duration:2.85s}.fish.fast{-webkit-animation:fish .3s ease-in-out infinite alternate;animation:fish .3s ease-in-out infinite alternate}.fish.fast .tail{-webkit-animation:tailFast .065s ease-in-out infinite alternate;animation:tailFast .065s ease-in-out infinite alternate;height:7em;left:-16em;top:-4em}.fish.fast .fins .top,.fish.fast .fins .bottom{-webkit-animation-duration:.3s;animation-duration:.3s}.fish.fast .side{-webkit-animation:sideFinFast .065s linear infinite;animation:sideFinFast .065s linear infinite}.fish.fast .eye{-webkit-animation:none;animation:none}.fish.fast .eye:after{background:darkorange;content:"";height:.8em;position:absolute;transform:rotate(10deg);width:2.5em}.fish.fast .bubbles .bubble{-webkit-animation:bubbleOneFast .3s ease-in infinite;animation:bubbleOneFast .3s ease-in infinite}.fish.fast .bubbles .bubble:nth-child(4n-1){-webkit-animation-name:bubbleTwoFast;animation-name:bubbleTwoFast;-webkit-animation-delay:.8s;animation-delay:.8s;-webkit-animation-duration:.33s;animation-duration:.33s}.fish.fast .bubbles .bubble:nth-child(4n-2){-webkit-animation-name:bubbleThreeFast;animation-name:bubbleThreeFast;-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-animation-duration:.315s;animation-duration:.315s}.fish.fast .bubbles .bubble:nth-child(4n-3){-webkit-animation-name:bubbleFourFast;animation-name:bubbleFourFast;-webkit-animation-delay:2.2s;animation-delay:2.2s;-webkit-animation-duration:.285s;animation-duration:.285s}@-webkit-keyframes bubbleOne{0%{transform:scale(0) translateY(0)}25%{transform:scale(1) translateY(0)}100%{transform:scale(1) translateX(0.2em) translateY(-60vh)}}@keyframes bubbleOne{0%{transform:scale(0) translateY(0)}25%{transform:scale(1) translateY(0)}100%{transform:scale(1) translateX(0.2em) translateY(-60vh)}}@-webkit-keyframes bubbleTwo{0%{transform:scale(0) translateY(0)}25%{transform:scale(1) translateY(0)}100%{transform:scale(1) translateX(-0.2em) translateY(-60vh)}}@keyframes bubbleTwo{0%{transform:scale(0) translateY(0)}25%{transform:scale(1) .........完整代码请登录后点击上方下载按钮下载查看