css动画实现鼠标放上去切换多种颜色

最新推荐文章于 2024-06-04 09:44:05 发布

小董大咖

最新推荐文章于 2024-06-04 09:44:05 发布

阅读量329

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/ddf__/article/details/128490355

版权

要视频无法上传

实现这个非常简单只需要css的keyframes和hover属性

  <style type="text/css">
        div
        {
            width:100px;
            height:100px;
            border-radius:50px;
            background-color:red;
        }
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        div:hover
        {
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>