CSS3——过渡、动画、2D/3D转换

CSS3过渡、动画、2D/3D转换 目录

• 过渡模块
• 动画模块
• 2D转换
• 3D转换
• 背景尺寸属性
• 背景图片定位区域属性
• 背景绘制区域属性

过渡模块

跳转到目录 一、一些属性

• transition: 过渡属性 过渡时长 运动速度 延迟时间;
• transition-property: 属性名 - 告诉系统哪个属性需要执行过渡效果.
• transition-duration: 时长 - 告诉系统过渡效果的持续的时长.
• transition-delay: 时长 - 告诉系统延迟多少秒之后才开始执行过渡动画.
• transition-timing-function: 取值 - 告诉系统过渡动画的执行速度.

取值描述linear规定以相同速度开始至结束的过渡效果ease规定慢速开始，然后变快，然后慢速结束的过渡效果ease-in规定以慢速开始的过渡效果ease-out规定以慢速结束的过渡效果ease-in-out规定以慢速开始和结束的过渡效果

二、使用过渡的三要素

1. 必须要有属性发生变化.
2. 必须告诉系统哪个属性需要执行过渡效果.
3. 必须告诉系统过渡效果持续时长

三、注意点

当多个属性需要同时执行过渡效果时用,隔开即可.

        div {
            width: 100px;
            height: 100px;
            background-color: red;
            transition-property: width, height, background-color;
            transition-duration: 5s, 5s, 5s;
        }
         /* :hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上 */
        div:hover {
            width: 200px;
            height: 200px;
            background-color: black;
        }

四、过渡的连写格式 transition: 过渡属性 过渡时长 运动速度 延迟时间;

        div {
            width: 100px;
            height: 50px;
            transition: width 5s linear 0s, height 5s linear 0s, background-color 5s linear 0s;
            /* 可以省略后两个参数 */
            /*transition: width 5s, background-color 5s, height 5s;*/
            /* 如果多个属性运动速度/持续时间/延迟时间相同,可以统一这样写 */
            /*transition: all 5s;*/
        }
        div:hover{
            width: 300px;
            height: 300px;
            background-color: blue;
        }

• 注意点

1. 和分开写一样, 如果想给多个属性添加过渡效果也是用,隔开即可
2. 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
3. 如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为transition:all 0s;

五、使用过渡模块的步骤 4. 先编写好基本的界面 5. 修改需要过渡的属性 6. 然后再给被修改属性的那个元素添加过渡即可

动画模块

跳转到目录

• animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
• animation-name: 动画名 - 告诉系统要执行哪个动画.
• animation-duration: 时长 - 告诉系统动画持续的时长.
• animation-timing-function: 取值 - 告诉系统动画的执行速度.(取值同过渡动画这个属性的取值)
• animation-iteration-count: 次数 - 告诉系统需要执行几次动画.
• animation-direction: 取值 - 告诉系统是否需要执行往返动画.

取值描述normal默认的取值, 执行完一次之后回到起点继续执行下一次.alternate往返动画, 执行完一次之后往回执行下一次.

• animation-play-state: 取值 - 告诉系统当前动画是否需要暂停.

取值描述running执行动画.paused暂停动画.

• animation-fill-mode: 取值 - 指定动画等待状态和结束状态的样式.

取值描述none不做任何改变forwards让元素结束状态保持动画最后一帧的样式backwards让元素等待状态的时候显示动画第一帧的样式both让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

        .box1 {
            width: 100px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            animation-name: sport;
            animation-duration: 5s;
        }

        @keyframes sport {
            0% {
                left: 0;
                top: 0;
            }
            25% {
                left: 300px;
                top: 0;
            }
            50% {
                left: 300px;
                top: 300px;
            }
            75% {
                left: 0;
                top: 300px;
            }
            100% {
                left: 0;
                top: 0;
            }
        }

• 使用动画的三个步骤

  • animation-name: 动画名 - 告诉系统要执行哪个动画.

  • 告诉系统我们需要自己创建一个名称叫做xxx的动画.

     @keyframes 动画名 {
     	   /* margin-left: 0 到 margin-left: 500px 作的动画 */
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
    

  • animation-duration: 时长 - 告诉系统动画持续的时长.

• 过渡和动画之间的异同 相同点:

  1. 两者都是用来给元素添加动画的.
  2. 两者都是系统新增的一些属性.
  3. 两者都需要满足三个要素才会有动画效果.

  不同点:

  1. 过渡必须人为(设置:hover)的触发才会执行动画.
  2. 动画不需要人为的触发就可以执行动画.

• 动画模块的连写格式 animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画; 和过渡模块一样, 也可以省略后面的参数,只保留前面的两个参数. animation:动画名称 动画时长;

• 注意点

1. 如果是简单的动画操作,可以使用from to方式创建动画

      	@keyframes move {
               from{
                   margin-left: 0;
               }
               to{
                   margin-left: 500px;
               }
           }
   

2. 如果需要多个动画操作, 可以使用 20%, 40%, 60%...方式创建动画

       @keyframes myRotate {
           0%{
               transform: rotate(10deg);
           }
           50%{
               transform: rotate(50deg);
           }
           100%{
               transform: rotate(70deg);
           }
       }
   

2D转换

跳转到目录

• transform: rotate(度数deg); - 旋转多少度

  其中deg是单位, 代表多少度

• transform: translate(水平方向px, 垂直方向px); - 水平垂直平移多少

• transform: scale(水平缩放, 垂直缩放); - 按比例缩放.

  注意: 1、如果取值是1, 不变 2、如果取值大于1, 放大 3、如果取值小于1, 缩小 4、如果水平和垂直缩放都一样, 那么可以简写为一个参数.

• transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5); - 多个转换连写

  注意: 1、如果需要进行多个转换,那么用空格隔开 2、2D转换模块会修改元素的坐标系,所以旋转之后再平移就不是水平平移的.

• 形变中心点 transform-origin:水平方向取值, 垂直方向取值; 注意:

1. 默认情况下所有的元素都是以自己的中心点作为形变中心点来旋转,我们可以通过transform-origin:来修改旋转的中心点.
2. 取值的形式

   transform-origin: 200px 0px; - 具体像素 transform-origin: 50% 50%; - 百分比 transform-origin: center center; - 关键字

           ul li:first-child{
               background-color: red;
               transform: rotate(30deg);
           }
           ul li:nth-child(2){
               background-color: green;
               transform: rotate(50deg);
           }
           ul li:last-child{
               background-color: blue;
               transform: rotate(70deg);
           }
   

• 旋转轴向 默认情况下所有元素都是围绕Z轴进行旋转.transform:rotateZ(45deg). 如果修改X或Y轴旋转, 换为 rotateX或rotateY即可.
  • perspective: 500px; - 透视属性,近大远小效果. 注意点: 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

3D转换

跳转到目录

1. 什么是2D和3D? 2D就是一个平面, 只有宽度和高度, 没有厚度 3D就是一个立体, 有宽度和高度, 还有厚度 默认情况下所有的元素都是呈2D展现的

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

       .father{
           width: 200px;
           height: 200px;
           background-color: red;
           border: 1px solid #000;
           margin: 100px auto;
           perspective: 500px;
           transform-style: preserve-3d;
           transform: rotateY(80deg);
       }
       .son{
           width: 100px;
           height: 100px;
           background-color: blue;
           border: 1px solid #000;
           margin: 0 auto;
           margin-top: 50px;
           transform: rotateY(45deg);
       }
   

背景尺寸属性

跳转到目录 什么是背景尺寸属性?

背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

background-size:取值 取值:

• 具体像素: background-size:200px 100px;
• 百分比: background-size:contain;
• 宽度等比拉伸:background-size:auto 100px;
• 高度等比拉伸:background-size:100px auto;
• cover: background-size:cover; cover含义: 1. 告诉系统图片需要等比拉伸 2. 告诉系统图片需要拉伸到宽度和高度都填满元素
• contain: background-size:contain ; contain含义: 1. 告诉系统图片需要等比拉伸 2. 告诉系统图片需要拉伸到宽度或高度都填满元素

背景图片定位区域属性

跳转到目录 background-origin: 取值

告诉系统背景图片从什么区域开始显示, 默认情况下就是从padding区域开始显示

取值: background-origin:padding-box; - 从内边距处显示 background-origin:border-box; - 从边框处显示 background-origin:content-box; - 从内容处显示

背景绘制区域属性

跳转到目录 background-clip:取值

背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景

取值: background-clip:padding-box; - 从内边距处绘制 background-clip:border-box; - 从边框处绘制 background-clip:content-box; - 从内容处绘制