HTML + CSS-3 + 介绍 + 形变 + 过渡

CSS3 介绍

CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。

1.1 CSS形变（transform）

形变是指使html元素改变形状，尺寸和位置，常用的方式是进行移动、缩放、转动、拉长或拉伸。

1.1.1 2D形变

语法：

transform:属性值 [translate()/rotate()/scale()/skew()/matrix()]

属性值：

1）translate() 元素从当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。

数值可以是负数，反方向移动。

2）rotate() 旋转 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转,单位是deg

 

3）scale()元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

 

值scale(2,4)把宽度转换为原始尺寸的2倍，高度转换成原始尺寸的4倍

4）skew()元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数(斜交；歪斜)

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

 

5)matrix() 需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。matrix() 方法把所有 2D 转换方法组合在一起。

第一个宽度比例1就是原大小    

第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜      

第三个是左右倾斜，数字和第二个一样的意思      

第四个是高度比例1就是原大小      

第五个是X方向的像素位移，X方向就是左右

第六个是Y方向的像素位移，X方向就是上下

补充：

实现多个形变

transform: rotate(360deg) scale(0.01,0.01); 这样写也可以

 

1.1.2 3D形变

?

1.2 过渡动画

1.2.1 transition(过渡)

语法：

transition: css属性 时间 时间曲线 延迟时间

注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：

 

示例代码：transition: width 2s;

   transition: width 2s, height 2s, transform 2s;

 transition-timing-function的取值如下：

用来控制速度

     linear(匀速)

   ease-in (加速)

            ease-out 减速

   ease-in-out 选加速再减速

     ease 先慢再快再快

补充：

事件：

hover  鼠标移上去

 link    正常的状态

active  点击的状态

visited  点击过后的状态

 

1.3 关键帧动画

 animation 动画

介绍：

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

使用方法：

1）在@keyframes中创建动画

     @keyframes myfirst{

from{background-color:red}

to{background-color:yellow}

}

myfirst 自定义的动画名称

2）将动画捆绑到元素上

div{

animation:myfirst 5s

.....

}

 

属性：

示例：div{ animation:myfirst 5s linear 2s infinite alternate;}

   myfirst:动画名称

   5s:时间

   linear:速度曲线

   2s:延迟时间

   infinite:动画播放的次数 （无限次）

   alternate:下一动画的播放方向（alternate 反向----- normal 正常播放）

 

 

补充：

过渡动画与关键帧的区别

不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果

transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

  

 

 

 

 

 

参考：http://www.w3school.com.cn/css3/css3_intro.asp

    https://baike.baidu.com/item/CSS3/4059544?fr=aladdin