[HTML]Web前端开发技术22（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，animation ，@keyframes，Transition——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

CSS3 转换transform 属性

2．CSS3 3D 转换

CSS3 过渡transition 属性

Transition子属性设置语法

CSS3 动画animation

1．CSS3 动画animation 基本语法

2．@keyframes 规则定义

总结

---

前言

冲冲冲！！！

---

CSS3 转换transform 属性

缩放 scale(x, y) 。

       scale(x,y)方法的作用是缩放指定的元素，参数x 表示元素宽度的缩放倍数，参数y 表示元素高度的缩放倍数。scale 方法也可以接受负值，当参数x 为负值时，元素内容会横向倒置；当参数y 为负值时，元素内容会纵向倒置。

transform:scale(x,y);

transform:scale(1,4);

transform:scale(2,2);

扭曲 skew(deg, deg) 。

        skew(x,y)方法的作用是将元素翻转（扭曲）给定的角度，参数x、y 分别表示围绕x轴翻转给定的角度、围绕y 轴翻转给定的角度。

transform: skew(deg, deg);

transform: skew(30deg, 30deg); /*围绕x轴翻转30°，围绕y轴翻转30° */

transform: skew(15deg, 65deg); /*围绕x轴翻转15°，围绕y轴翻转65° */

综合转换 matrix( n,n,n,n,n,n ) 。

       matrix()方法和2D 变换方法合并成一个。matrix()方法是一个综合性的方法，它综合了上述的移动、旋转、缩放等功能。matrix()方法有六个参数，包含旋转、缩放、移动（平移）和倾斜功能。语法如下，参数的作用如下：

   transform:matrix(scaleX, skewX, skewY, scaleY, translateX, translateY);/* 基本语法*/

   transform:matrix(0.866,0.5,-0.5,0.866,20,20); /* x轴、y轴缩放0.866;x轴、y

轴扭曲0.5和-0.5;x轴、y轴位移20px */

举个例子

				
CSS3 2D转换-缩放、扭曲、矩阵




这是原div
这个div缩放1.5倍


这是原div
这个div扭曲方法
	


这是原div
这是div采用matrix方法

---

2．CSS3 3D 转换

       CSS3 可以使用3D 转换来对元素进行格式化。常用的3D 转换方法有rotateX()、rotateY()。

  旋转 rotateX() 方法。

       通过rotateX()方法，元素围绕其X 轴以给定的度数进行旋转。

旋转 rotateY() 方法。

       通过rotateY()方法，元素围绕其Y 轴以给定的度数进行旋转。

transform: rotateX(angle); /* X轴方向旋转一定角度 */

transform: rotateY(angle); /* Y轴方向旋转一定角度 */

#div1{transform:rotateX(120deg);}

#div2{transform:rotateY(120deg);margin:10px auto;}

举个例子

			

CSS3 3D转换



     
这是原div


    
沿X轴旋转这个div



   

     
这是原div
   
  

    
沿Y轴旋转这个div
	
		

---

CSS3 过渡transition 属性

l transition 属性是一个复合属性，它有四个过渡属性。语法如下：

     transition: property duration timing-function delay;

     transition: width 2s;   /* 宽度上过渡2s */

---

Transition子属性设置语法

transition-property: none|all| property;

transition-property: width;      /* width属性上转场 */

transition-duration: time;

transition-duration: 3s;

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out| cubicbezier(n,n,n,n);

  transition-timing-function: ease-in-out;

      transition-delay: time;

      transition-delay: 2s;

举个例子

CSS3 过渡transition与transform综合应用

linear
ease
ease-in
ease-out
ease-in-out
请把鼠标指针移动到红色的div元素上，就可以看到过渡和转换的效果。

---

CSS3 动画animation

CSS3 动画是指元素从一种样式逐渐变化为另一种样式的效果。通过CSS3的@keyframes（关键帧）规则，可以创建动画，从而取代动画图片、Flash 动画以及JavaScript编写的动画。在@keyframes 中规定某项CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

1．CSS3 动画animation 基本语法

animation 是一个复合属性，语法如下:

    animation:animation-name|animation-duration|animation-timing-function|animation-delay | animation-iteration-count| animation-direction

2．@keyframes 规则定义

采用 @keyframes 规则创建动画，需要将它绑定到一个 CSS 的选择器，否则动画不会有任何效果。定义至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称、规定动画的时长 。

@keyframes 基本语法：

     @keyframes myAnimation {

             from {Properties:Properties value; }

             Percentage {Properties:Properties value; }

             to {Properties:Properties value; }

}

     @keyframes myAnimation {

             0% {Properties:Properties value; }

             Percentage {Properties:Properties value; }

            100% {Properties:Properties value; }

}

---

总结

人生苦短，一天当作两天卷！

---

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！