C3之动画的格式参数及实例

最新推荐文章于 2024-03-29 06:10:55 发布

wzf666

最新推荐文章于 2024-03-29 06:10:55 发布

阅读量656

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/qq_41547728/article/details/84111044

版权

总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数，通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

动画的基本格式

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		 		.box{
		 				animation:（动画的属性）动画的值
		 		}
		 		@keyframes run{
				from{}
				to{}
			}
		</style>
</head>
<body>
		<div class="box"></div>
</body>

动画的执行方式

@keyframes run{
				from{}
				to{}
			}

或者

@keyframes run{
				0%{}
				100%{}
			}

动画的各种参数
1. 设置动画的序列名称
animation-name
2.设置动画执行一次所需要的时间
animation-duration
3.设置动画延迟执行的时间
animation-delay
4.设置动画执行的次数
animation-iteration-count
5.设置动画执行方向
animation-direction

相反方向 alternate
常顺序 normal
6.设置动画执行完毕时保持的状态
animation-fill-mode
7.设置动画执行的速度
animation-timing-function
8.设置动画是否执行
animation-play-state

相反方向	alternate
常顺序	normal

开始动画	running
停止动画	paused

帧动画

帧动画是将animation中设置steps的值所生成的动画
下面是帧动画的程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width:400px ;
				height: 400px;
				border: 3px solid black;
				border-radius:50% ;
				margin: 100px auto;
				position: relative;
			}
			.div2{
				width: 5px;
				height: 200px;
				border: 1px solid black;
				background-color:black ;
				border-radius: 50% 50% 0 0/ 50% 50% 0 0;
				position: absolute;
				left: 200px;
				top: 0px;
				animation: name 60s steps(60) infinite;
				transform-origin:  center bottom; 
			}			
			@keyframes name{
				from{}
				to{
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
	</body>
</html>