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

[HTML]Web前端开发技术22(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation ,@keyframes,Transition——喵喵画网页_第1张图片

希望你开心,希望你健康,希望你幸福,希望你点赞!

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

喵喵喵,你对我真的很重要!

目录

前言

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)方法的作用是将元素翻转(扭曲)给定的角度,参数xy 分别表示围绕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 */

举个例子

[HTML]Web前端开发技术22(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation ,@keyframes,Transition——喵喵画网页_第2张图片






CSS3 2D转换-扭曲、缩放





				

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


这是原div

这个div缩放1.5倍

这是原div

这个div扭曲方法

这是原div

这是div采用matrix方法


2CSS3 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;}

举个例子

[HTML]Web前端开发技术22(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation ,@keyframes,Transition——喵喵画网页_第3张图片






CSS3 3D转换





			

CSS3 3D转换

这是原div

沿X轴旋转这个div

这是原div

沿Y轴旋转这个div


CSS3 过渡transition 属性

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

     transition: property duration timing-function delay;

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

[HTML]Web前端开发技术22(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation ,@keyframes,Transition——喵喵画网页_第4张图片


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;

举个例子

[HTML]Web前端开发技术22(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation ,@keyframes,Transition——喵喵画网页_第5张图片

[HTML]Web前端开发技术22(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation ,@keyframes,Transition——喵喵画网页_第6张图片






CSS3 过渡






CSS3 过渡transition与transform综合应用


linear
ease
ease-in
ease-out
ease-in-out

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


CSS3 动画animation

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

1CSS3 动画animation 基本语法

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

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

[HTML]Web前端开发技术22(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation ,@keyframes,Transition——喵喵画网页_第7张图片

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; }

}


总结

人生苦短,一天当作两天卷!


希望你开心,希望你健康,希望你幸福,希望你点赞!

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

喵喵喵,你对我真的很重要!

[HTML]Web前端开发技术22(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,animation ,@keyframes,Transition——喵喵画网页_第8张图片

你可能感兴趣的:(喵喵画网页,html,前端,html5,计算机学习,javascript,css3)