CSS3鼠标移入时闪闪发光的效果。_css鼠标移动上去内发光-优快云博客

本文链接：https://blog.youkuaiyun.com/lc520dy1314/article/details/84585006

本文详细介绍了使用CSS实现动画效果和交互设计的方法，包括旋转动画、渐变背景、鼠标悬停效果等，通过实例展示了如何利用CSS3的transform和transition属性来增强网页的视觉效果。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box{
        margin: 100px;
    }
    li{
        position: relative;
        float: left;
        width: 50px;
        height: 50px;
        margin-right: 100px;
    }
    span{
        width: 100px;
        height: 100px;
        margin: 12px;
        display: block;
        border-radius: 50%;
        background: -webkit-linear-gradient(red, blue);
        transition:1s all ease;
    }
    li:hover span{
        transform:rotateZ(360deg);
    }

    @keyframes warn {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }
        20% {
            transform: scale(1);
            opacity: 0.6;
        }
        40% {
            transform: scale(1.2);
            opacity: 0.4;
        }
        60% {
            transform: scale(1.4);
            opacity: 0.2;
        }
        80% {
            transform: scale(1.6);
            opacity: 0.1;
        }
        100% {
            transform: scale(1.8);
            opacity: 0.0;
        }
    }
    a:before{
        border: 12px solid #A8E957;
        content:'';
        position: absolute;

        width: 100px; 
        height: 100px;
        border-radius: 62px;
        opacity: 0;
    }
    li:hover a:before{animation: warn 1s ease-out infinite;}
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <a href="#">
                <span></span>
            </a>
        </li>
        <li>
            <a href="#">
                <span></span>
            </a>
        </li>
        <li>
            <a href="#">
                <span></span>
            </a>
        </li>
        <li>
            <a href="#">
                <span></span>
            </a>
        </li>
    </ul>

</div>

</body>
</html>