18 CSS使用动画

「已注销」

于 2019-09-03 14:47:29 发布

阅读量139

点赞数

分类专栏： HTML5+CSS+JS

本文链接：https://blog.youkuaiyun.com/Tracy785/article/details/100517329

版权

HTML5+CSS+JS 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种使用CSS实现的动画效果，当鼠标悬停在一个元素上时，该元素将无限循环地改变其宽度、高度及背景颜色。动画从黄色开始，依次变为蓝色、绿色和橙色，每种颜色对应不同的尺寸。通过关键帧定义了动画过程中的多个状态，实现了平滑的过渡效果。

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

<html>
<head>
	<meta charset='utf-8'>
	<title>animation</title>
	<style type='text/css'>
		p{
			width:100px;
			height:100px;
			background-color:antiquewhite
		}
		p:hover{
			animation-duration:1s;
			animation-delay:200ms;
			animation-name:bilibili;
			animation-iteration-count:infinite;
			animation-direction:alternate
		}
		@keyframes bilibili{
			from{
				width:100px;
				height:100px;
				background-color:#ffec32
			}
			50%{
				width:130px;
				height:130px;
				background-color:#3b88ff
			}
			75%{
				width:160px;
				height:160px;
				background-color:#58ff4a
			}
			to{
				width:200px;
				height:200px;
				background-color:#ffad2a
			}
		}
	</style>
</head>
<body>
<p></p>
</body>
</html>