12 第十二章：过渡动画和变换

2018-10-30 本文已影响0人晚溪呀

过渡 transition

让属性变化成为一个持续一段时间的过程，而不是立即生效的
不支持数值到auto

可能的属性：

执行变换的属性： transition-property,
变换延续的时间： transition-duration,
在延续时间段，变换的速率变化 transition-timing-function,
linear：匀速
ease：（默认值）慢快慢
easein：慢入
easeout：慢出
easeinout：慢入慢出

cubic-bezier(.17,.67,.83,.67)

贝塞尔曲线（ x1, y1, x2, y2 ）

变换延迟时间 transition-delay。
而我们通常会用简写方式：

transition:width 2s, height 2s, background-color 2s, transform 2s;

多个属性过渡的时候用逗号隔开！
display不支持过渡

动画 animation

可以为从一个CSS样式配置到另一个CSS样式配置的动画制作动画。动画包含两个组件，一个描述CSS动画的样式和一组指示动画样式的开始和结束状态的关键帧，以及可能的中间路标。

可能的值：

animationname 动画名称
animationduration 持续时间
animationdelay 延迟时间
animationtimingfunction 运动曲线
animationiterationcount 规定动画播放次数！
infinite无限重复或者number
animationdirection 规定轮流反向播放动画！
normal：（默认）正常方向
reverse：反方向运行
alternate ：动画先正后反方向运行
alternatereverse：先反后正方向

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

animation-name动画名称

    div{
    /*动画：动画名称 动画持续时间*/
    animation: move 2s;
    }

规定动画如何运动，绑定动画，注意写法：

    @keyframes move{
    from{width:100px;backrgound:red;}
    to{width:500px;background:blue;}
    /*0%{} 100%{}*/
    }

animation-play-state: 动画执行状态

paused 暂停动画
running 运行动画

animation-fill-mode: 规定动画的第一帧和最后一帧的状态！通俗的讲就是动画结束之后保持什么状态
none （默认）原始状态>动画>原始状态
forwards 原始状态>动画>停在动画帧100%
backwards (忽略原始状态)进入动画帧0%>动画>原始状态
both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%
行内元素不会继承animation-fill-mode;
行内元素可以继承animation-fill-mode;

变换

属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）

1.旋转rotate

一个值代表X方向的值
rotate:会占据原来的位置

这里面的值可以是（角度deg）（圈turn）（弧度rad）（梯度grad）只是占据自己的位置，不会影响其他元素的位置

    div{
        transform:rotate();
    }

默认情况下所有元素都是围绕Z轴进行旋转

transform:rotateX(deg);
transform:rotateY(deg);
transform:rotateZ(deg);

2. 变换焦点 transform-origin

具体的值
百分比值
left / top / right / bottom / center

    div{
    /*这里要注意的是：不要写在hover样式里面，而是本身元素里面。默      
    认是中心点 用空格隔开
    */
        transform-origin:x y;
    }

3.缩放 scale

scale
负值会反方向的放大
scale:会占据原来的位置

放大和缩小的倍数不支持负值！

    div{
        transform:scale(1.2);
    }

位移 translate
transform:translate(x,y);
会占据原来的位置

    div{
         /*两个值写法 中间用逗号隔开*/
         transform:translate(X,Y);
         /*一个值写法*/
         transform:translateX();
         transform:translateY();
    }

5.倾斜

不同于旋转，可以用度数，弧度角度梯度控制，当到一个临界点的时候会消失不见

 div{
      transform:skew(30deg,30deg);
 }

6.复合写法

transform 不同的值用空格隔开括号里面用逗号隔开
复合写法中。应该把translate写在最前面

 div{
      transform:translate(50px,50px) scale(1.2);
 }

总结:

想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

旋转轴向.jpg

坐标系.png

什么是透视
近大远小

近大远小.jpg
注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
perspective: 500px; 数值越大看的事物越符合从远处观看的效果！

浏览器支持

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性

允许调整大小

注意：必须要添加overflow:;属性因为overflow重新检测盒子里面的内容

overflow值可以是：
默认visible
hidden 隐藏
auto 根据内容决定是否滚动条
scroll 滚动条

resize:

none 默认
horizontal 水平可以缩放
vertical 垂直可以缩放
both 垂直水平都能缩放

计算calc()

calc()，你就可以通过计算来决定一个CSS属性的值,可以用在任何长度,数值,时间,角度,频率
等处。

可以使用 + - * / 四则运算也可以加括号
运算符号前后必须要有空格
在实际的开发中需要加上兼容性前缀，前缀加在 calc 前面
而真正在计算的时候我们要把所有的距离都考虑进去如：边框内边距等…

 div{
      width:-webkit-calc(100% - （100px - 50px）);
      width:-moz-calc(100% - (25px * 2));
 }

3D转换模块！

什么是2D和3D
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度

默认情况下所有的元素都是呈2D展现的

如何让某个元素呈3D展现

和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可

3 .只要父元素被拉伸了,子元素也会被拉伸

坐标轴旋转图

image.png
1的数字

4d5c05110a7964b3b94917fc5b9a687.png
2的数字

544f516a986036ab1c9d14a96e6bd0c.png

3的数字

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
       body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
     margin:0;
     padding:0;
 }
     ul{
     position:relative;
     margin:100px auto;
     width:300px;
     height:300px;
     border:1px solid #000;
     transform-style:preserve-3d;
     transform:rotateX(0deg) rotateY(0deg);
 }
 ul li{
     position:absolute;
     top:0;
     left:0;
     list-style:none;
     width: 300px;
     height: 300px;
     font-size:60px;
     text-align:center;
     line-height:300px;
 }
 ul li:nth-child(1){
     background-color:red;
     transform:rotateX(90deg) translateZ(150px);
 }
 ul li:nth-child(2){
     background-color:#01b7f5;
     transform:rotateX(180deg) translateZ(150px);
 }
 ul li:nth-child(3){
     background-color:green;
     transform:rotateX(270deg) translateZ(150px);
 }
 ul li:nth-child(4){
     background-color:#ccc;
     transform:rotateX(360deg) translateZ(150px);
 }
 ul li:nth-child(5){
     background-color:#666;
     transform:translateX(-150px) rotateY(deg);
 }
 ul li:nth-child(6){
     background-color:pink;
     transform:translateX(-150px) rotateY(deg);
 }
 </style>
 </head>
 <body>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <!--<li>5</li>-->
 <!--<li>6</li>-->
 </ul>
 </body>
 </html>

注意点:

1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面

12 第十二章：过渡动画和变换

过渡 transition

`cubic-bezier(.17,.67,.83,.67)`

动画 animation

变换

总结:

允许调整大小

计算calc()

3D转换模块！

猜你喜欢

热点阅读

12 ­ 第十二章：过渡动画和变换

过渡 transition

cubic-bezier(.17,.67,.83,.67)

动画 animation

变换

总结:

允许调整大小

计算calc()

3D转换模块！

猜你喜欢

热点阅读

12 第十二章：过渡动画和变换

`cubic-bezier(.17,.67,.83,.67)`