SVG+CSS3 跳水动画模拟

CSS Only SVG Jump Loader (based on codrops demo)

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

第三方库
作品简介 1764
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    font-size: 62.5%;
    height: 100%;
    overflow: hidden;
}
body {
    background: #7981b2;
}
svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40rem;
    height: 40rem;
    margin-left: -20rem;
    margin-top: -20rem;
    overflow: visible;
}
.jumper {
    fill: none;
    stroke: #383845;
    stroke-width: 10px;
    stroke-dashoffset: 0;
    stroke-dasharray: 0, 136.71884px;
    -webkit-animation: animJumper 1.3s linear infinite;
    animation: animJumper 1.3s linear infinite;
}
.jumper.clone {
    opacity: 0.05;
    -webkit-transform: translateY(200px) scaleY(-1);
    -ms-transform: translateY(200px) scaleY(-1);
    transform: translateY(200px) scaleY(-1);
}
.circleL {
    opacity: 0;
    -webkit-transform-origin: 47.2px 95.6px;
    -ms-transform-origin: 47.2px 95.6px;
    transform-origin: 47.2px 95.6px;
    -webkit-animation: animCircle 1.3s infinite;
    animation: animCircle 1.3s infinite;
}
.circleR {
    opacity: 0;
    -webkit-transform-origin: 136.2px 95.6px;
    -ms-transform-origin: 136.2px 95.6px;
    transform-origin: 136.2px 95.6px;
    -webkit-animation: animCircle 1.3s 0.728s infinite;
    animation: animCircle 1.3s 0.728s infinite;
}
@-webkit-keyframes animJumper {
    8% {
        stroke-dasharray: 20.50783px, 136.71884px;
    }
    32% {
        stroke-dasharray: 41.01565px, 136.71884px;
        stroke-dashoffset: -47.85159px;
    }
    56% {
        stroke-dasharray: 20.50783px, 136.71884px;
        stroke-dashoffset: -116.21102px;
    }
    64% {
        stroke-dasharray: 0, 136.71884px;
        stroke-dashoffset: -136.71884px;
    }
}
@keyframes animJumper {
    8% {
        stroke-dasharray: 20.50783px, 136.71884px;
    }
    32% {
        stroke-dasharray: 41.01565px, 136.71884px;
        stroke-dashoffset: -47.85159px;
    }
    56% {
        stroke-dasharray: 20.50783px, 136.71884px;
        stroke-dashoffset: -116.21102px;
    }
    64% {
        stroke-dasharray: 0, 136.71884px;
        stroke-dashoffset: -136.71884px;
    }
}
@-webkit-keyframes animCircle {
    0% {
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes animCircle {
    0% {
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.check-out {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 2rem;
    color: #fff;
}

HTML

CSS Only SVG Jump Loader (based on codrops demo)

编辑器支持Emmet

快捷键

CSS Only SVG Jump Loader (based on codrops demo)

SVG path + CSS3蚯蚓蠕动动画

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：