该博客展示了如何通过CSS的keyframes和hover属性来创建一个简单的动态效果，当鼠标悬停在元素上时，元素的背景颜色会在预设的颜色之间平滑过渡，包括红色、蓝色、黄色和绿色。动画时长为5秒，采用线性定时函数。
要视频无法上传
实现这个非常简单只需要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>
扫一扫
8133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
