使用bezier-easing.js实现的凹凸曲线效果

Bump name，输入姓名时，底部线条呈现贝塞尔曲线动画。

h5, 文本效果

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://rsms.me/inter/inter-ui.css');
body {
    align-items: center;
    display: flex;
    font-family: 'Inter UI', sans-serif;
    font-size: 14px;
    height: 100vh;
    justify-content: center;
    margin: 0;
}
.container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 320px;
}
.placeholder {
    transform-origin: 0 50%;
    transform: translateX(10px);
}
.placeholder.expand {
    animation: MovePlaceholder 220ms both linear;
}
.placeholder.return {
    animation: ReturnPlaceholder 220ms both linear;
}
input {
    background: transparent;
    border: 0;
    font-size: 20px;
    height: 30px;
    outline: none !important;
    position: absolute;
    top: -12px;
}
svg {
    position: relative;
    top: -25px;
}
@keyframes MovePlaceholder {
    0% {
        transform: translateX(10px) translateY(0) rotate(0)
    }
    60% {
        transform: translateX(4px) translateY(-8px) rotate(-18deg) scale(0.92)
    }
    100% {
        transform: translateX(0) translateY(-30px) rotate(0deg) scale(0.75)
    }
}
@keyframes ReturnPlaceholder {
    0% {
        transform: translateX(0) translateY(-30px) scale(0.75)
    }
    100% {
        transform: translateX(10px) translateY(0)
    }
}

HTML

Bump name，输入姓名时，底部线条呈现贝塞尔曲线动画。

h5, 文本效果

编辑器支持Emmet

快捷键

Bump name，输入姓名时，底部线条呈现贝塞尔曲线动画。

h5, 文本效果

使用anime.js和SVG实现的列表项删除破碎玻璃特效

使用SVG feTurbulence, feColorMatrix, feDisplacementMap特性实现文本火焰填充特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：