CSS文字和装饰线动画

PHOTO

Thu Apr 29 2021 07:36:32 GMT+0000 (Coordinated Universal Time)

Saved by @ycljcfer

/* <p class="animation" data-content="Lorem ibsum dolor Lorem ibsum dolor">Lorem ibsum dolor</p> */

.animation {
    position: relative;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    line-height: 2;
    
    &::before {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        color: transparent;
        white-space: nowrap;
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: #000;
        z-index: -1;
    }
    &:hover::before {
        animation: move 3s infinite linear;
    }
}
@keyframes move {
    100% {
        transform: translate(-209px, 0);
    }
}

https://github.com/chokcoco/iCSS/issues/103

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

CSS

@ycljcfer

浏览器默认css样式清除浏览器默认css样式清除 CSS 文字装饰 -下划线 CSS 文字装饰 text-decoration & text-emphasis · Issue #103 · chokcoco/iCSS CSS设置文字与装饰线颜色分离text-decoration-color 与 color 分离 CSS文字和装饰线动画 CSS 文字装饰 text-decoration & text-emphasis CSS 文字装饰 text-decoration & text-emphasis · Issue #103 · chokcoco/iCSS CSS 文字装饰background模拟下划线 CSS 文字装饰 background模拟虚线 CSS 文字装饰-巧妙改变 background-size 与 background-position 实现文字 hover 动效 CSS 文字装饰-改变 background-position 实现文字 hover 动效(反向效果) CSS 文字装饰下划线变色效果的实现 CSS 传统方式实现直线路径动画 CSS 传统方式实现曲线路径动画 CSS Motion Path 实现直线路径动画 CSS Motion Path 实现波浪形路径动画 CSS Motion Path 实现曲线路径动画 CSS三角形的实现 CSS-offset-anchor 运动锚点利用 Motion Path 制作按钮点击撒点效果 Button Animation with CSS Offset Paths Button Animation with CSS Offset Paths 汽车地图行驶效果利用 Motion-Path 绘制路径动画 Notebook theme - FoldingText Theme demonstrating multiple header styles - FoldingText How to install a theme? - FoldingText

Browse more snippets >>