✨✨✨css3大绝技之animation动画

动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

制作动画分为两步:

1．先定义动画
2．再使用(调用)动画

✨✨🎈 动画的基本使用

✨🎈🎈 用keyframes定义动画（类似定义类选择器）

语法格式：

@keyformes 动画名称 {
    0% {
        width:100px;
    }
    100% {
        width:200px;
    }
}

0%和100%有一个专用名词，叫动画序列。

动画序列：

  • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
  • 在@keyfiames中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。

基本示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画序列</title>
		<style type="text/css">
			/* 1.可以做多个状态的变化   keyformes  关键帧*/
			/* 2.里面的百分比要是整数 */
			@keyframes  move {
				0% {
					transform: translate(0,0);
				}
				25% {
					transform: translate(1000px,0);
				}
				50% {
					transform: translate(1000px,500px);
				}
				75% {
					transform: translate(0,500px);
				}
				100% {
					transform: translate(0,0);
				}
			}
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
				animation-name: move;
				animation-duration: 8s;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

✨🎈🎈元素使用动画

语法格式：

div {
    /*调用动画*/
    /*动画名称   move*/
    animation-name: move;
    /*持续时间   就是动画运行时间*/
    animation-duration:2s;
}

基本示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*我们想要页面一打开，一个盒子就从左边走到右边*/
			/*1.定义动画*/
			@keyframes move{
				/*开始状态*/
				0% {
					transform: translateX(0px);
				}
				/*结束状态*/
				100% {
					transform: translateX(1000px);
				}
			}
			/*使用动画*/
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				/*元素调用动画*/
				/*动画名称   move*/
				animation-name: move;
				/*持续时间    就是动画运行持续时间*/
				animation-duration: 2s;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

✨🎈🎈 动画常用属性

属性描述
@keyformes规定动画
animation所有动画属性的简写属性，除了animation-play-state属性。
animation-name规定@keyframes动画的名称。(必须的)
animation-duration规定动画完成—个周期所花费的秒或毫秒,默认是0。（必须的)
animation-timing-function规定动画的速度曲线,默认是“ease”.
animation-delay规定动画何时开始，默认是0。
animation-iteration-count规定动画被播放的次数,默认是1，还有infinite(无限的、循环的)
animation-direction规定动画是否在下一周期逆向播放，默认是“normal ",alternate逆播放
animation-play-state规定动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode规定动画结束后状态,保持forwards回到起始backwards

基本示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画常用属性</title>
		<style type="text/css">
			@keyframes move{
				0% {
					transform: translate(0,0);
				}
				100% {
					transform: translate(1000px,0);
				}
			}
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
				/*动画时间*/
				animation-name: move;
				/*持续时间*/
				animation-duration: 2s;
				/*运动曲线*/
				animation-timing-function: ease;
				/*何时开始*/
				animation-delay: 1s;
				/*重复次数   iteration 重复的   count 次数    infinite无限*/
				/*animation-iteration-count: infinite;*/
				/*是否反方向播放  默认的normal  如果想要反方向  就写alternate  逆向*/
				/*animation-direction: alternate;*/
				/*动画结束后的状态  默认的是backwords 回到起始状态  我们可以让他停留在结束状态  forwords*/
				animation-fill-mode: forwards;
			}
			div:hover {
				/*鼠标经过div  让这个div  停止动画， 鼠标离开就继续动画*/
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

动画简写属性格式

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向  动画起始或结束的状态

简单示例：

/*animation: name duration timing-function delay iteration-count direction fill-mode;*/
				/*去前面两个属性 name duration一定要写      默认的你不用改的可以不用写*/
				animation: move 2s linear 0s 2 alternate forwards ;

放置顺序也是有点讲究的，比如：持续时间肯定要放在何时开始时间前面

  • 简写属性里面不包含animation-play-state
  • 暂停动画: animation-play-state: puased;经常和鼠标经过等其他配合使用
  • 想要动画走回来,而不是直接跳回来:animation-direction : alternate
  • 盒子动画结束后，停在结束位置:animation-fill-mode : forwards
🌼🌼🌼热点图案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大数据热点图</title>
		<style type="text/css">
			body {
				background-color: #333;
			}
			.map {
				position: relative;
				width: 747px;
				height: 617px;
				background: url(img/map.png);
				margin: 0 auto;
				
			}
			.city {
				position: absolute;
				top: 227px;
				right: 193px;
				color: #fff;
			}
			.tb {
				top: 505px;
				right: 75px;
			}
			.gz {
				top: 534px;
   				right: 185px;
			}
			.dotted {
				width: 8px;
				height: 8px;
				background-color: #09f;
				border-radius: 50%;
			}
			.city div[class^="pulse"] {
				/*保证我们小波纹在父盒子里面水平居中   放大之后就会中心向四周发散*/
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 8px;
				height: 8px;
				border-radius: 50%;
				box-shadow: 0 0 12px #009dfd;  /*水平  垂直   阴影   颜色*/
				animation: pulse 1.5s linear infinite;
			}
			.city div.pulse2 {
				animation-delay: 0.5s;
			}
			.city div.pulse3 {
				animation-delay: 1s;
			}
			@keyframes pulse{
				0{}
				70%{ 
					/*缩放为什么不用scale， 因为scale在缩放的过程中不仅会把文本放大，还会把阴影放大  就会达不到想要的效果*/
					/*transform: scale(3);*/
					width: 40px;
					height: 40px;
					opacity: 1;    /*透明度*/
				}
				100% {
					width: 70px;
					height: 70px;
					opacity: 0;  /*透明度为1则是不透明*/
				}
			}
		</style>
	</head>
	<body>
		<div class="map">
			<div class="city">
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
			<div class="city tb">
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
			<div class="city gz">
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
		</div>
	</body>
</html>

效果如图：![在这里插入图片描述](https://img-blog.csdnimg.cn/b7ee5b9835b94e7aba6bb438c5e69d0a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqNjI0,size_16,color_FFFFFF,t_70#pic_center

🌵🌵🌵出现的一些问题：

（1）

阴影部分这么高，是因为三个盒子叠加在一起了，实际上应该要这三个盒子摞在一起，压住那个蓝色的小圆点盒子就好了，沿着点向四周发散

解决方法：给这三个盒子加定位，使阴影在盒子里面水平居中，添加如下属性属性值。即可解决。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

解决后如图：在这里插入图片描述
（2）在这里插入图片描述

在三个盒子的公共css样式里写了基本样式，给pulse2写了延迟0.4秒，pulse3盒子写了延迟0.8秒，却没有出现想要的效果。

原因：权重不够覆盖原来的属性
在这里插入图片描述
解决方案：增加权重
在这里插入图片描述
（3）疑问？？为什么不用scale进行缩放？

解答：因为scale在缩放的过程中不仅会把元素放大，还会把阴影放大 就会达不到想要的效果

✨🎈🎈 速度曲线细节 （详细讲解细节）

animation-timing-function:规定动画的速度曲线，默认是“ease"

值描述
linear动画从头到尾的速度是相同的。匀速
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
steps指定了时间函数中的间隔数量(步长)

基本示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>steps</title>
		<style type="text/css">
			div {
				font-size: 20px;
				width: 0;
				height: 30px;
				background-color: pink;
				overflow: hidden;
				/*让我们的文字强制一行内展示*/
				*white-space: nowrap;  /*若不写这个属性，当文本出现逗号就会可能出错，当文本为英文时，则会出错*/  
				/*steps  就是分几步来完成我们的动画  有了steps  就不要在写 ease 或者linear*/
				animation: w 4s steps(10) forwards;  /*加forwards是为了能在动画结束时不往回跳*/
			}
			@keyframes w{
				0%{
					width: 0px;	
				}
				100%{
					width: 200px;
				}
			}
		</style>
	</head>
	<body>
		<div>世纪佳缘我在这里等你</div>
        <!--<div>asd，asd，asd，asd，</div>-->
	</body>
</html>
🌼🌼🌼奔跑的熊大案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>奔跑的熊大</title>
		<style type="text/css">
			body {
				background-color: #ccc;
			}
			div {
				position: absolute;
				width: 200px;
				height: 100px;
				background: url(img/bear.png) no-repeat;
				/*我们元素可以添加多个动画，用逗号分隔*/
				animation: bear 1s steps(8) infinite,move 4s forwards;
			}
			@keyframes bear{
				0%{
					background-position:0,0;
				}
				100%{
					background-position: -1600px,0 ;/*background-position 属性设置背景图像的起始位置*/
				}
			}
			@keyframes move{
				0%{
					left: 0;
				}
				100%{
					left: 50%;
					transform: translateX(-50%);
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

background-position 属性设置背景图像的起始位置。

🌾🌾🌾意外之技能 —— 如何扒网站图片

此处京东网站示例：

进入京东网站，按F12或者右击选择检查，然后找到Sources，选择点击以img开头的即可进行找图片，选中想要的图片，点击那个链接，选择Open in new tab，最后右击选择图片另存为进行保存即可。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

# css3 # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云Stack8.3面向香港正式发布，六大亮点激发云上跃迁

avatar 华为云开发者联盟
cover

6个实例带你解读TinyVue 组件库跨框架技术

avatar 华为云开发者联盟
cover

GaussDB SQL查询语句执行过程解析

avatar 华为云开发者联盟