13

CSS实现下划线动画的各种姿势

 3 years ago
source link: https://gylidian.js.org/y0NIjj/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
CSS实现下划线动画的各种姿势
2 年前1 分钟 读完 (大约 217 个字) 26次访问

CSS实现下划线动画的各种姿势

该文章还在施工中… 过几天再来看吧。

在背景图片上做手脚

思路就是 先让 background-image 限定在一定的高度，之后 :hover 时再用动画调整宽度。

STEP1: background-image

.underline {
    background-image: linear-gradient(transparent calc(100% - 10px), black 10px);
    background-repeat: no-repeat;
    // 或者
    background-image: linear-gradient(120deg, #7af7a9 0%, #FFEB3B 100%)；
    background-repeat: no-repeat;
    background-size: 100% 0.2em;
    background-position: 0 88%;
    // 或者
    background-image: linear-gradient(transparent 0%, transparent 65%, yellow 65%, yellow 90%, transparent 90%, transparent);
}

STEP2:

.underline {
    background-size: 0% 100%;
    transition: background-size .3s ease-in;

&:hover {
        background-size: 100% 100%;
    }
}

在 border 上做手脚

.underline {   
    border-bottom: .4em solid transparent;
    border-image: linear-gradient(to right, #A8DBED 0%, #E291E6 100%);
    border-image-slice: 1;
}

使用伪元素

h1 {
    position: relative;
    z-index: 0;

&::before {
        position: absolute;
        transition: .3s;
        content: '';
        width: 0%;
        left: 0;
        bottom: 0;
        height: 16px;
        background: lightpink;
        z-index: -1;
    }
    &:hover::before {
        width: 100%;
    }
}
.title .shadow {
    .is-red {
        box-shadow: inset 0 -6px 0 rgba(255,74,110,.2);
    }
    .is-turquoise {
        box-shadow: inset 0 -6px 0 rgba(35,209,153,.2);
    }
    .is-purple {
        box-shadow: inset 0 -6px 0 rgba(184,107,255,.2);
    }
    .is-yellow {
        box-shadow: inset 0 -6px 0 rgba(255,221,87,.2);
    }
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK