动画

最新推荐文章于 2025-05-01 23:03:21 发布

小木木傻

最新推荐文章于 2025-05-01 23:03:21 发布

阅读量101

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/mumushaya/article/details/111309141

版权

<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 200px;
				height: 200px;
				background: url("img/下载.jpg")center/100% 100% no-repeat;
				animation: ad-donghua 1s infinite backwards;
			}
			/*创建关键帧 key:关键  frames 帧  name动画名字
			 from：动画开始
			 to：动画结束
			 infinite：动画重复
			 animation:动画名称 时间 循环次数 时间曲线
			 forwards：动画最后状态  保留动画最后的样子
			 backwards：默认值 回到动画最初的样子
			 
			 时间曲线：ease默认效果慢快慢  linear匀速  ease-in底速效果 尾部快 ease-out快速-慢   ease-in-out慢快慢*/
			/*兼容浏览器
			 * @-moz-keyframes name{
				from{}
				to{}
			}
			@-ms-keyframes name{
				from{}
				to{}
			}
			@-webkit-keyframes name{
				from{}
				to{}
			}*/
			@keyframes ad-donghua{
				from{
					/*动画开始样式*/
					transform: translate(0,0);
				}
				to{
					/*动画结束样式*/
					transform: translate(300px,0px);
				}
			}
		</style>
	</head>
	<body>
		<!--<animation>动画-->
			<div class="box"></div>
	</body>
</html>