使用SVG实现带粘稠效果的滚动箭头

Gooey Scroll Arrow 可用于下载页面或提示用户向下滚动页面。

svg, gooey, arrow

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    height: 100%;
    width: 100%;
    text-align: center;
}
body {
    background-color: #9DDCDC;
}
.ico {
    margin: 0 auto;
    text-align: center;
    width: 100px;
    height: 100px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-filter: url("#goo");
    filter: url("#goo");
}
.ico .circle {
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform-origin: 0%;
    transform-origin: 0%;
}
.ico .circle.circle-top {
    height: 33.33333px;
    width: 41.66667px;
    -webkit-animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    z-index: 0;
    top: 0;
}
.ico .circle.circle-bottom {
    height: 33.33333px;
    width: 41.66667px;
    -webkit-animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    z-index: 9;
    bottom: 0px;
}
.ico .st-arrow {
    fill: #55544F;
    -webkit-animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
    animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
    -webkit-perspective: 9000px;
    perspective: 9000px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
}
.svg {
    z-index: 9;
    position: relative;
}
@-webkit-keyframes blob-1-anim {
    0% {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
    14% {
        -webkit-transform: translateX(-50%) translateY(-8px);
        transform: translateX(-50%) translateY(-8px);
    }
    24% {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
    100% {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
}
@keyframes blob-1-anim {
    0% {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
    14% {
        -webkit-transform: translateX(-50%) translateY(-8px);
        transform: translateX(-50%) translateY(-8px);
    }
    24% {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
    100% {
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
}
@-webkit-keyframes blob-2-anim {
    0% {
        -webkit-transform: scale(1) translate(-50%, 10px);
        transform: scale(1) translate(-50%, 10px);
    }
    30% {
        -webkit-transform: scale(1) translate(-50%, 10px);
        transform: scale(1) translate(-50%, 10px);
    }
    70% {
        -webkit-transform: scale(1) translate(-50%, 10px);
        transform: scale(1) translate(-50%, 10px);
    }
    95% {
        -webkit-transform: scale(1) translate(-50%, 26px);
        transform: scale(1) translate(-50%, 26px);
    }
    100% {
        -webkit-transform: scale(1) translate(-50%, 10px);
        transform: scale(1) translate(-50%, 10px);
    }
}
@keyframes blob-2-anim {
    0% {
        -webkit-transform: scale(1) translate(-50%, 10px);
        transform: scale(1) translate(-50%, 10px);
    }
    30% {
        -webkit-transform: scale(1) translate(-50%, 10px);
        transform: scale(1) translate(-50%, 10px);
    }
    70% {
        -webkit-transform: scale(1) translate(-50%, 10px);
        transform: scale(1) translate(-50%, 10px);
    }
    95% {
        -webkit-transform: scale(1) translate(-50%, 26px);
        transform: scale(1) translate(-50%, 26px);
    }
    100% {
        -webkit-transform: scale(1) translate(-50%, 10px);
        transform: scale(1) translate(-50%, 10px);
    }
}
@-webkit-keyframes scrolly {
    0% {
        -webkit-transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
        transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
    }
    30% {
        -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
        transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
    }
    70% {
        -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
        transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
    }
    95% {
        -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
        transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
    }
    100% {
        -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
        transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
    }
}
@keyframes scrolly {
    0% {
        -webkit-transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
        transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
    }
    30% {
        -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
        transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
    }
    70% {
        -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
        transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
    }
    95% {
        -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
        transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
    }
    100% {
        -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
        transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
    }
}

HTML

</defs>
        <path class="st-arrow" d="M317.5,487.6c0.3-0.3,0.4-0.7,0.7-1.1l112.6-112.6c6.3-6.3,6.3-16.5,0-22.7c-6.3-6.3-16.5-6.3-22.7,0
					l-86,86V136.1c0-8.9-7.3-16.2-16.2-16.2c-8.9,0-16.2,7.3-16.2,16.2v301.1l-86-86c-6.3-6.3-16.5-6.3-22.7,0
					c-6.3,6.3-6.3,16.5,0,22.7l112.7,112.7c0.3,0.3,0.4,0.7,0.7,1c0.5,0.5,1.2,0.5,1.7,0.9c1.7,1.4,3.6,2.3,5.6,2.9
					c0.8,0.2,1.5,0.4,2.3,0.4C308.8,492.6,313.8,491.3,317.5,487.6z" />
    </svg>
</div>

Gooey Scroll Arrow 可用于下载页面或提示用户向下滚动页面。

svg, gooey, arrow

编辑器支持Emmet

快捷键

Gooey Scroll Arrow 可用于下载页面或提示用户向下滚动页面。

svg, gooey, arrow

使用D3.js（Canvas）和SVG滤镜实现的彩色粘稠染料点滴滑落动画特效

使用SVG和SCSS实现的相机镜头调焦动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：