css自定义动画

最新推荐文章于 2024-11-27 20:52:57 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2024-11-27 20:52:57 发布

阅读量734

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/echokkk/article/details/78657418

css 专栏收录该内容

12 篇文章

订阅专栏

使用css自定义动画，使用到了css3中的属性，所以为了处理浏览器的兼容性问题，要记得加上私有前缀，在此我没有添加，主要使用到的属性有keyframes以及animation属性，keyframes是自己定义一个自己想要的动画，animation是让动画与执行动画的元素关联起来。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 100px;
			height: 100px;
			background: red;
			position: relative;
			animation: run 3s infinite;
		}
		@keyframes run {
			0% {
				left: 0;
				top: 0;
				background: red;
			}
			25% {
				left: 500px;
				top: 0;
				background: yellow;
			}
			50% {
				left: 500px;
				top: 600px;
				background: blue;
			}
			75% {
				left: 0;
				top: 600px;
				background: green;
			}
			100% {
				left: 0;
				top: 0;
				background: pink;
			}
		}
	</style>
</head>
<body>
	<div>1</div>
</body>
</html>