CSS 文字装饰下划线变色效果的实现

PHOTO

Thu Apr 29 2021 07:51:08 GMT+0000 (Coordinated Universal Time)

Saved by @ycljcfer

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>

a {
    background: 
        linear-gradient(90deg, #0cc, #0cc),
        linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    background-size: 100% 3px, 0 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    transition: 0.5s all;
    color: #0cc;
}
a:hover {
    background-size: 0 3px, 100% 3px;
    color: #000;
}

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

HTML

@ycljcfer

通过link导入网络字体资源到HTML文件 CSS 文字装饰background模拟下划线 CSS 文字装饰 background模拟虚线 CSS 文字装饰-巧妙改变 background-size 与 background-position 实现文字 hover 动效 CSS 文字装饰-改变 background-position 实现文字 hover 动效(反向效果) CSS 文字装饰下划线变色效果的实现 CSS 传统方式实现直线路径动画 CSS 传统方式实现曲线路径动画 CSS Motion Path 实现曲线路径动画 Button Animation with CSS Offset Paths Button Animation with CSS Offset Paths 汽车地图行驶效果利用 Motion-Path 绘制路径动画

Browse more snippets >>