Web前端 学习知识点总结（一）HTML基本标签. Web前端 学习知识点总结（二）之Form和Css选择器. Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型. Web前端 学习知识点总结（四）之display 和 float. Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白. Web前端 学习知识点总结（六）定位position. Web前端 学习知识点总结（七）Css3动画animation. Web前端 学习知识点总结（八）JavaScript的常用基础. Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础. Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器. Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作. Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式. Web前端 学习知识点总结（十三）学生管理系统案例.
通过transform，transition和animation可以在页面中做出一些基本的动画效果。
GIF是一种位图。GIF采用Lempel-Zev-Welch（LZW）压缩算法，最高支持256种颜色。由于这种特性，GIF比较适用于色彩较少的图片，比如卡通造型、公司标志等等。
如果碰到需要用真彩色的场合，GIF的表现力有限。
在Web运用中，图像的文件量的大小会影响到下载的速度，因此可以根据GIF带调色板的特性来优化调色板（GIF通常会自带一个调色板，里面存放需要用到的各种颜色。），减少图像使用的颜色数（有些图像用不到的颜色可以舍去），而不影响到图片的质量。
位图的大致原理是：图片由许多的像素组成，每一个像素都被指定了一种颜色，这些像素综合起来就构成了图片。
Flash由于HTML（标准通用标记语言下的一个应用）的功能十分有限，无法达到人们的预期设计，更需要一种既简单直观又有功能强大的动画设计工具，而Flash的出现正好满足了这种需求。
Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。
JavaScriptJavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
JavaScript是很重要的web内容 ，等后面会详细介绍。
-webkit- 浏览器的内核，很多的浏览器都不兼容动画效果，需要加上该语句。
-webkit-transform: 只看结果没有过程，一般只做小效果，不用于整体的设计。一下为transform可以接的属性。
（1）translate(x，y)平移（x，y为实数）。 正值往右 正值往下。或者可以在某一个指定的方向上。如下：
在X方向 translateX(); 在Y方向 translateY();相对于自身位置发生了偏移，原来的位置还在，没有脱离标准文档流，对周边元素没有影响（同前面的relative类似）
（2）scal(x,y)
当x,y=1 不变
当x,y >1 不变
当x,y<1 缩放
当只写一个值的时候，X，Y轴上的缩放量一致。
在X方向 scaleX(); 在Y方向 scaleY();（3）skew()倾斜 单位deg。
skewY(y); y为正，Y轴不动，X轴逆时针倾斜 skewX(x); x为正，X轴不动，Y轴逆时针倾斜（4）rotate()旋转 单位deg。
当数值大于零时 为顺时针旋转。 当数值小于零时 为逆时针旋转。倾斜和旋转的区别：旋转自身不会变化 倾斜自身会进行改变。
代入的事例，webkit-tansform：+需要的内容。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ -webkit-transform: translate(30px,30px); -webkit-transform: scale(); -webkit-transform: skew(); -webkit-transform: rotate(); } </style> </head> <body> <div></div> </body> </html>transition 过度，一般加在函数和触发机制之间。
有两个状态 起始–结束
过渡函数放在起始状态
transition 和 display：none冲突
触发机制：
1.伪类处罚 hover active(鼠标悬浮的时候) focused(鼠标获取焦点的时候 比如在 input 选中的时候) checked(一般用在check中)2.@media 媒体查询3.JavaScript下面介绍一些transition的一些属性。
transition-property 需要显示过程的属性 transition-duration 过度持续时间 单位是S transition-timing-function: ;时间函数 ease 快--慢 linear 匀速 ease-in 慢--快 ease-out 快--慢 ease-in -out 慢--快--慢 transition-delay: 2s; 推迟多久后过渡执行 防止误操作有一些基本的用法如下html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: red; /*必须有*/ transition-property:all; transition-duration:2s ; /*可选择*/ transition-timing-function: ; transition-delay:0.4s; /*混合属性*/ /*transition: all 2s; 符合属性直接没有顺序，某些数值可以省略*/ } div:hover{ background-color:green; margin: 50px; width: 300px; } </style> </head> <body> <div></div> </body> </html>一般用的是 -webkit-animation-name: change; 为调用的结构，调用设置好的函数。
keyframes 加 change（函数名）{ } 括号的内部有from~to表示起始状态和最后的状态。
@-webkit-keyframes change{ from{background:orange;} 20%{background:yellow;} 40%{background:greenyellow;} 60%{background:dodgerblue;} 80%{background:blue;} to{background: purple;} }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*animation: ;动画 包含多个状态 ,借助关键帧 */ width: 100px; height: 100px; background-color: red; -webkit-animation-name: change; -webkit-animation-duration:3s ; /*direction方向*/ -webkit-animation-direction: reverse; /*奇数次是正方向 偶数次是反方向的*/ -webkit-animation-direction: alternate; /*动画执行的次数*/ /*无穷次*/ /*-moz-animation-iteration-count:infinite;*/ /*会停在最后一帧的位置*/ animation-fill-mode:forwards; /*从下一个状态开始等待，等待期间显示关键帧的起始状态*/ animation-fill-mode:backwards; } /*播放状态 可以让动画暂停*/ -webkit-animation-play-state:paused; /*对动画的定义*/ @-webkit-keyframes change{ from{background:orange;} 20%{background:yellow;} 40%{background:greenyellow;} 60%{background:dodgerblue;} 80%{background:blue;} to{background: purple;} } </style> </head> <body> <div></div> </body> </html>用下面一个侧边栏的案例来总结，以上的知识点，因为侧边栏和display:block冲突，只能用动画去解决问题。
要求： 代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .side{ position: relative; } /*开始设置为灰色状态,不设置width*/ /*第一个插件 我的关注*/ .side #img:nth-of-type(1){ /*width:150px;*/ height:50px; /*text-align:center;*/ /*不让盒子增加*/ border-bottom-left-radius: 10px; border-top-left-radius: 10px; background-color:#414141; position: absolute; right:0; bottom: -360px; transition: all 0.3s; /*background-color: #B81B16;*/ } /*第二个插件 我的收藏*/ .side #img:nth-of-type(2){ /*width:150px;*/ height:50px; /*text-align:center;*/ /*不让盒子增加*/ border-bottom-left-radius: 10px; border-top-left-radius: 10px; background-color:#414141; position: absolute; right:0; bottom: -420px; transition: all 0.3s; /*background-color: #B81B16;*/ } /*第三个插件 我的订单*/ .side #img:nth-of-type(3){ /*width:150px;*/ height:50px; /*text-align:center;*/ /*不让盒子增加*/ border-bottom-left-radius: 10px; border-top-left-radius: 10px; background-color:#414141; position: absolute; right:0; bottom: -480px; transition: all 0.3s; /*background-color: #B81B16;*/ } /*第四个插件 我的热爱*/ .side #img:nth-of-type(4){ /*width:150px;*/ height:50px; /*text-align:center;*/ /*不让盒子增加*/ border-bottom-left-radius: 10px; border-top-left-radius: 10px; background-color:#414141; position: absolute; right:0; bottom: -540px; transition: all 0.3s; /*background-color: #B81B16;*/ } /*p的标签 a中的内容 先隐藏*/ .side #img p { display: none; line-height: 50px; color: white; padding-left:22px ; font-weight: bold; float:left; -webkit-animation-name: change; -webkit-animation-duration:1.5s ; } .side #img p a{ text-decoration: none; color: white; } .side #img img{ margin:8px 5px 5px; padding: 2px; width:35px; float: right; } /*显示p的内容*/ .side #img:hover p{ /*width:100px; height:50px;*/ display: block; background-color:#B81B16; border-bottom-left-radius: 10px; border-top-left-radius: 10px; } /*显示内容后也更改图标的颜色*/ .side #img:hover { background-color:#B81B16; } /*display和动画效果冲突*/ @-webkit-keyframes change{ from{width: 75px;} to{width:90px;} } .clear:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div class="side"> <div id="img" class="clear"> <p><a href="#">我的关注</a></p> <img src="img/微信图片_20201019204900.png"/> </div> <div id="img" class="clear"> <p><a href="#">我的收藏</a></p> <img src="img/微信图片_20201019204903.png"/> </div> <div id="img" class="clear"> <p><a href="#">我的订单</a></p> <img src="img/微信图片_20201019204905.png"/> </div> <div id="img" class="clear"> <p><a href="#">我的热爱</a></p> <img src="img/微信图片_20201019204907.png"/> </div> </div> </body> </html>结果：
