非常有趣的 HTML <a> 标签鼠标移动效果

yufei       2 年, 9 月 前       765

代码如下

<style>
a {
    position: relative;
    --text-opacity: 1;
    color: #ed64a6;
    color: rgba(237,100,166,var(--text-opacity));
    display: inline-block;
    text-decoration: none;
    transition: all .2s ease
}

a:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    --bg-opacity: 1;
    background-color: #000;
    background-color: rgba(0,0,0,var(--bg-opacity));
    content: "";
    transform-origin: bottom right;
    transform: scaleX(0);
    height: .125rem;
    transition: transform .5s ease
}

a:hover:before {
    transform-origin: bottom left;
    transform: scaleX(1)
}

a:hover {
    color: var(--color-text)
}
</style>
<a href="#">将鼠标移动到我这里,然后移开看看效果</a>

效果的话,自己看吧

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.