css 动画设置

最新推荐文章于 2024-04-09 16:46:01 发布

邓邓邓邓邓邓

最新推荐文章于 2024-04-09 16:46:01 发布

阅读量584

点赞数 1

本文链接：https://blog.csdn.net/qq_38830589/article/details/99863446

版权

文章目录

1. CSS动画-Animations介绍

Animations 是 css3 的一个模块，使用 keyframes 定义如何随着时间的移动改变 css 的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations 由两部分组成：css 动画的配置，以及一系列的 keyframes （用来描述动画的开始、过程、结束状态）。

1）动画定义

关键帧使用百分比来表示在动画序列中出现的时间。0% 表示动画的初始时间，也可以通过 from 关键字表示。100% 表示动画的结束时间，也可以通过 to 关键字表示。

	@keyframes 动画名称{
		from {

		}
		to{

		}
	}
	=》
	@keyframes 动画名称{
		10% {
					
		}
		20%{

		}
		...
		100%{

		}
	}

2）动画应用

速写形式：
animation : animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-name ;
例：animation : 4s linear 0s infinite alternate move_eye ;
在这里插入图片描述
示例如下：
（1）外圆向外扩大，再缩小到原来的大小，内圆保持不动
（2）内圆向内缩小，再扩大到原来的大小，外圆保持不动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		div {
			box-sizing: border-box;
		}
		/*容器*/
		.content {
			width: 300px;
			height: 500px;
			background-color: #333333;
			margin: 0 auto;
		}
		/*正方形*/
		.content > .box {
			height: 300px;
			padding: 40px;

			animation-name: x;
			animation-duration: 9s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
		/*外圆*/
		.content > .box > .big{
			width: 100%;
			height: 100%;
			border-radius: 50%;
			padding: 20px;
			border: 5px solid #ededed;

			animation-name: y;
			animation-duration: 9s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
		/*内圆*/
		.content > .box > .big > .small {
			width: 100%;
			height: 100%;
			border: 20px solid #ededed;
			border-radius: 50%;
		}

		.content > .text {
			font-size: 18px;
			color: #ededed;
			text-align: center;
			margin-top: 50px;
		}

		
		/*动画定义*/
		@keyframes x {
			22.22%{
				padding: 30px;
			}
			50% {
				padding: 40px;
			}
			100%{
				padding: 40px;
			}
		}

		@keyframes y {
			22.22% {
				padding: 30px;
			}
			50% {
				padding: 20px;
			}
			72.22% {
				padding: 32px;
			}
			100%{
				padding: 20px;
			}
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="box">
			<div class="big">
				<div class="small"></div>
			</div>
		</div>
		<div class="text">
			<p>HI!</p>
		</div>
	</div>
</body>
</html>

3）第三方动画库

animate.css

步骤：
1、引入动画库
2、为元素添加class

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
	
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: teal;
			border-radius: 50%;
			position: absolute;

		}
	</style>
</head>
<body>
	<div class="box animated slideInDown infinite"></div>
</body>
</html>

2. 梦幻西游仿真示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>梦幻西游</title>
	<link rel="stylesheet" href="../common.css">
	<style>
		.content {
			position: absolute;
			width: 950px;
			left: 50%;
			margin-left: -475px;
			bottom: 100px;
		}

		.content > ul::after {
			display: block;
			content: "";
			clear: both;
		}
		.content > ul >li {
			width: 200px;
			height: 180px;
			margin-right: 50px;
			float: left;
			overflow:hidden; 
		}

		.content > ul >li:last-child {
			margin-right: 0;
		}
		.content > ul >li > div {
			width: 1600px;
			height: 180px;
			font-size: 0;
			
			/*给人物图片添加动画*/
			animation-name: dong;
			animation-duration: 1s;
			/*animation-delay: 1s;*/
			animation-iteration-count: infinite;
			/*animation-direction: reverse;*/
			animation-timing-function: steps(8);
		}
		.content > ul >li > div > img {
			width: 100%;
		}


		/*1. 定义人物动画*/
		@keyframes dong {
			from {
				margin-left: 0
			}
			to {
				margin-left: -1600px;
			}
		}


		html,body,.main {
			height: 100%;
		}
		.main {
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.main > .bg {
			position: relative;
			width: 3920px;
			height: 100%;
			background-image: url('./images/bg.jpg');
			background-repeat: repeat-x;

			/*给背景图片添加动画*/
			animation-name: bg;
			animation-duration: 30s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
		/*定义背景图片动画*/
		@keyframes bg {
			from {
				left:-1920px;
			}
			to {
				left: 0;
			}
		}

	</style>
</head>
<body>
	<div class="main">
		<!-- 背景 -->
		<div class="bg"></div>
		<!-- 师徒4人 -->
		<div class="content">
			<ul>
				<li>
					<div><img src="./images/wk.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/bj.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/ts.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/ss.png" alt=""></div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>