鼠标悬停发光按钮，流转边框

最新推荐文章于 2024-09-01 19:39:37 发布

青青子衿~~

最新推荐文章于 2024-09-01 19:39:37 发布

阅读量896

点赞数 1

文章标签： html css css3

本文链接：https://blog.youkuaiyun.com/weixin_45727272/article/details/130291167

版权

该文章展示了如何使用CSS动画创建一个鼠标悬停时发光并旋转边框的按钮效果。通过hue-rotate滤镜和伪元素结合过渡效果，实现了不同颜色和动态变化的按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：css 动画实现，鼠标悬停发光按钮，流转边框。鼠标border可以旋转

前言

提示：以下是本篇文章的代码内容,供大家参考,相互学习

一、html代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>鼠标悬停发光按钮</title>
    <link rel="stylesheet" href="../css/13.css">
</head>

<body>
    <div class="container">
        <!-- 接下来的有点神奇了哈，划重点哦 -->
        <!-- 这里的--i是一个自定义属性 -->
        <a href="#" style="--i:1">点赞</a>
        <a href="#" style="--i:2">关注</a>
        <a href="#" style="--i:3">评论</a>
        <a href="#" style="--i:4">收藏</a>
        <a href="#" style="--i:5">分享</a>
    </div>
</body>

</html>

二、css代码

*{
    /* 初始化 取消页面元素的内外边距 */
    margin: 0;
    padding: 0;
}
.container{
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 让子元素垂直排列 */
    flex-direction: column;
    /* 100%窗口宽度、高度 */
    width: 100vw;
    height: 100vh;
    /* 背景径向渐变 */
    background: radial-gradient(circle at center,#555,#000);
}
.container a{
    /* 相对定位 */
    position: relative;
    /* 将a元素转为块级元素，不然无法设置宽和高 */
    display: block;
    width: 140px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 40px;
    color: plum;
    text-decoration: none;
    font-size: 20px;
    /* 这里加个动画过渡 */
    transition: all 0.3s ease-in-out;
    /* 我们来改变各个a元素的颜色【划重点】 */
    /* 大家看到效果了吧，是不是很神奇 */
    /* hue-rotate是颜色滤镜，可以加不同的度数来改变颜色，这里我们用了calc自动计算函数，以及var函数来调用我们给每一个a元素设置的不同的自定义属性1~5，然后分别乘以60度，就能够分别得到不同的颜色 */
    filter: hue-rotate(calc(var(--i)*60deg));
}
.container a::before,
.container a::after{
    /* 将两个伪元素的相同样式写在一起 */
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid plum;
    /* 这里也加一个动画过渡 */
    /* 最后的0.3s是延迟时间 */
    transition: all 0.3s ease-in-out 0.3s;
}
.container a::before{
    top: 0;
    left: 0;
    /* 删除左边元素的右、下边框 */
    border-right: 0;
    border-bottom: 0;
}
.container a::after{
    right: 0;
    bottom: 0;
    /* 删除右边元素的左、上边框 */
    border-top: 0;
    border-left: 0;
}
.container a:hover{
    background-color: plum;
    color: #000;
    /* 添加发光效果和倒影 */
    box-shadow: 0 0 50px plum;
    /* below是下倒影 1px是倒影和元素相隔的距离 最后是个渐变颜色 */
    -webkit-box-reflect: below 1px linear-gradient(transparent,rgba(0,0,0,0.3));
    /* 这里我们为以上属性设置一下延迟时间 */
    transition-delay: 0.4s;
}
.container a:hover::before,
.container a:hover::after{
    width: 138px;
    height: 58px;
    /* 这里不需要延迟 */
    transition-delay: 0s;
}