动画-animation

最新推荐文章于 2023-06-19 08:28:37 发布

Doigt_love

最新推荐文章于 2023-06-19 08:28:37 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

分类专栏： H5

本文链接：https://blog.youkuaiyun.com/Doigt_love/article/details/52263364

H5 专栏收录该内容

4 篇文章

订阅专栏

简单的CSS3动画

先来看效果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation</title>
	<style type="text/css">
		p{
			padding: 5px;
			border: medium double #508AD2;
			background-color: lightgray;
			font-family: sans-serif;
		}
		#kk{
			line-height: 10px;
			font-size: large;
			border: medium solid #E97373;
			animation: myoo 2s linear 300ms infinite;/*页面一加载就会显示这些效果*/
			animation-direction: alternate;
		}
		/*#kk:hover{
			animation: myoo 2s linear 300ms infinite;/*鼠标经过的时候会出现效果*/
			animation-direction: alternate;
		}*/
		@keyframes myoo{
			from{
				font-size: small;
				background-color: red;
			}
			/*中间几个帧的效果*/
			50%{						
				background-color: yellow;
				padding:1px;
			}
			75%{
				background-color: white;
			}
			/*最终效果*/
			to{

				font-size: x-large;
				border:medium double white;
				background-color: green;
				padding:4px;
			}
		}
	</style>
</head>
<body>
	<P>
		As the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an<span id="kk"> women</span>, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is so
	</P>
</body>
</html>

animaion属性图：