网站备案 新增接入凡科建站的优势
✨✨✨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>
效果如图：;
解决后如图：
（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，最后右击选择图片另存为进行保存即可。
