✨✨✨css3企业管理系统定制开发大绝技之动画
动画( animation)是CSS3企业管理系统定制开发中具有颠覆性的特征之一，企业管理系统定制开发可通过设置多个节点来企业管理系统定制开发精确控制一个或一组动画，企业管理系统定制开发常用来实现复杂的动画效果。
企业管理系统定制开发制作动画分为两步:
1．企业管理系统定制开发先定义动画
2．再使用(调用)动画
✨✨🎈 企业管理系统定制开发动画的基本使用
✨🎈🎈 用keyframes定义动画（类似定义类选择器）
语法格式：
@keyformes 动画名称 { 0% { width:100px; } 100% { width:200px; }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
✨🎈🎈元素使用动画
语法格式：
div { /*调用动画*/ /*动画名称 move*/ animation-name: move; /*持续时间 就是动画运行时间*/ animation-duration:2s;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
基本示例：
<!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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
✨🎈🎈 动画常用属性
| 属性 | 描述 |
|---|---|
| @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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
动画简写属性格式
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态- 1
简单示例：
/*animation: name duration timing-function delay iteration-count direction fill-mode;*/ /*去前面两个属性 name duration一定要写 默认的你不用改的可以不用写*/ animation: move 2s linear 0s 2 alternate forwards ;- 1
- 2
- 3
放置顺序也是有点讲究的，比如：持续时间肯定要放在何时开始时间前面
- 简写属性里面不包含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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
效果如图：;- 1
- 2
- 3
- 4
解决后如图：
（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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
🌼🌼🌼奔跑的熊大案例：
<!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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
background-position 属性设置背景图像的起始位置。
🌾🌾🌾意外之技能 —— 如何扒网站图片
此处京东网站示例：
进入京东网站，按F12或者右击选择检查，然后找到Sources，选择点击以img开头的即可进行找图片，选中想要的图片，点击那个链接，选择Open in new tab，最后右击选择图片另存为进行保存即可。