SVG+CSS3 简化版的鲤鱼跳龙门动画

很有童趣的一款SVG动画，也可以用于模拟池塘青蛙在水面跳跃、还有小时候用瓦片打水漂的动画。

svg，css3，jump，water

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2139
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@charset "UTF-8";
html,
body {
    height: 100%;
    position: relative;
    overflow: hidden;
}
body {
    background-color: #7981b2;
}
svg {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -200px 0 0 -200px;
    width: 400px;
    height: 400px;
}
.jumper {
    fill: none;
    stroke: #383845;
    stroke-width: 10px;
    stroke-dasharray: 0 183.80151px;
    stroke-dashoffset: 0;
    animation: jumper 1.2s linear infinite;
}
.jumper.clone {
    opacity: 0.05;
}
.circleL {
    opacity: 0;
    transform-origin: 41.9px 129.5px;
    animation: aniCircle 1.2s infinite;
}
.circleR {
    opacity: 0;
    transform-origin: 158.9px 129.5px;
    animation: aniCircle 1.2s 0.672s infinite;
}
@keyframes jumper {
    8% {
        stroke-dasharray: 27.57023px 183.80151px;
    }
    32% {
        stroke-dasharray: 55.14045px 183.80151px;
        stroke-dashoffset: -64.33053px;
    }
    56% {
        stroke-dasharray: 27.57023px 183.80151px;
        /* 0.15+0.85=1=$l,path运动到最边缘 */
        
        stroke-dashoffset: -156.23129px;
    }
    64% {
        stroke-dasharray: 0 183.80151px;
        stroke-dashoffset: -183.80151px;
    }
}
@keyframes aniCircle {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: scale(2.5);
    }
    100% {
        opacity: 0;
    }
}

HTML

很有童趣的一款SVG动画，也可以用于模拟池塘青蛙在水面跳跃、还有小时候用瓦片打水漂的动画。

svg，css3，jump，water

编辑器支持Emmet

快捷键

很有童趣的一款SVG动画，也可以用于模拟池塘青蛙在水面跳跃、还有小时候用瓦片打水漂的动画。

svg，css3，jump，water

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：