CSS中的过渡/形变/动画

2019-08-22 本文已影响23人追逐_chase

web.jpeg

1.过渡(`transition`)

是一个综合属性 transition:要过渡的属性时间运动的形式何时开始
transition-property 需要过渡的属性，比如:宽度，高度等
transition-duration 持续时间比如:4s
transition-timing-function 运行的速率
- linear匀速
- ease 速度由慢到快
- cubic-bezier(n,n,n,n) 贝塞尔函数曲线
transition-delay 延迟执行的时间，比如:1s后执行

 <style>
        *{
            padding: 0;
            margin: 0;
        }

        div {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;

            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            line-height: 100px;
            text-align: center;
            /* 添加过渡属性 */
            /* 更改某个属性 */
            transition-property: width;
            /* 持续时间 */
            transition-duration: 4s;
            /* 运行速率 */
            transition-timing-function: ease;
            /* 延迟执行  1s后执行*/
            transition-delay: 1s;

            /* 兼容  Safari */
            -webkit-transition-property:width;

        }

        div:hover{
            width: 500px;
        }
    
    </style>

transition.gif

2. `transform` 形变

transform 形变包括 位移、旋转、倾斜、缩放要配合 transition过渡使用才有效
transform也是一个综合属性 ,比如你做缩放，旋转 transform: scale(2.0) rotate(360deg);
平移 translate(x, y)

 <style>
        *{
            padding: 0;
            margin: 0;
        }

        div {
            
            margin: 100px auto;
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            line-height: 100px;
            text-align: center;
            transition: 2s;
            
           

        }

        div:hover{
           transform: translate(300px,300px);
        }
    
    </style>

translate.gif

注意：如果translateX是%那就是以自己盒子宽度为基准，比如：50%就是偏移自己宽度的一半的距离（%经常和定位集合使用，比如居中问题）
旋转 rotate(deg) 有单位
对元素进行旋转，正值为顺时针，负值为逆时针；
注意单位是 deg 度数

  div:hover{
          
           transform: rotate(270deg);
        }

rotate.gif

注意 transform 中一个transform-origin属性，设置中心点，(默认是中心点) 可以自己设置

可以是left top right bottom方位名词

可以是精确的 px

 div {
            
            margin: 100px auto;
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            line-height: 100px;
            text-align: center;
            transition: 2s;
    // 设置中心点
            transform-origin:10px 10px;
            
           

        }

        div:hover{
          
           transform: rotate(270deg);
           
        }

transform-origin.gif

倾斜 skew

  div:hover{
          
           /* transform: rotate(270deg); */
           transform: skew(45deg);
           
        }

skew.gif

缩放scale
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

  div:hover{
          
           /* transform: rotate(270deg); */
           /* transform: skew(45deg); */
           transform: scale(2.0);
           
        }

scale.gif

3D效果

要做3D动画的效果，必须要有一个属性perspective,并且这个属性是作用在要做3D效果的 父级元素上

perspective 视距效果，其原则是：近大远小
- 透视效果是写在父亲身上。
- perspective效果会叠加，不能在父元素设置之后，在父父的元素上在设置，这样就会出现叠加效果
perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。

注意 perspective属性，经常和translateZ()的结合起来使用。

transform-style属性
- 是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat（平面的）和preserve-3d
- 其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
backface-visibility: hidden隐藏做3D的效果的背面

3D旋转 `rotate3d(x,y,z,angle)`

rotate3d(x,y,z,angle) 定义 3D 旋转,是一个综合属性
- rotateX(angle) 沿着 X 轴的 3D 旋转。
- rotateY(angle) 沿着 Y 轴的 3D 旋转
- rotateZ(angle) Z 轴的 3D 旋转

  #warp {
            width: 500px;
            height: 500px;
            border: 1px solid;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -250px;
            /* 视距 */
            perspective: 200px;
            /* transform-style: preserve-3d; */
        }

        .dv{
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -100px;
            margin-top: -50px;
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            line-height: 100px;
            text-align: center;
            transition: 2s;
        }

rotateX(angle) 沿着 X 轴的 3D 旋转。

 .dv:hover{
            transform: rotateX(360deg);
            cursor: pointer;
        
        }

rotateX.gif

rotateY(angle) 沿着 Y 轴的 3D 旋转

 div:hover{
            transform: rotateY(360deg); 
           
        }

rotateY.gif

rotateZ() 旋转

 div:hover{
            transform: rotateZ(360deg); 
           
        }

rotateZ.gif

3D平移 `transform: translate3d(x,y,z)`

transform: translate3d(x,y,z) 是translateX() translateY() translateZ()的综合属性

   #warp {
            width: 500px;
            height: 500px;
            border: 1px solid;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -250px;
            /* 视距 */
            perspective: 500px;
        }

        .dv{
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -100px;
            margin-top: -50px;
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            line-height: 100px;
            text-align: center;
            transition: 2s;
           
        }

        .dv:hover{
           /* transform: rotateX(270deg); */
            transform: translate3d(100px,100px,100px);
            cursor: pointer;
            background-color: rebeccapurple;
           
        }

Untitled.gif

翻转导航

content: attr(data_hover); 获取自定义属性的内容

  <style>
         *{
             margin: 0;
             padding: 0;
         }

         *::before,*::after{
             box-sizing: border-box;
         }

         body{
             text-align: center;
         }

         nav{
             display: inline-block;
             margin-top: 100px;
             
           
             
         }
         nav a {
             display: inline-block;
             text-decoration: none;
             color: #ffffff;
              /* 添加视距效果 */
              perspective: 600px;
              
         }

         nav a span {
             display: inline-block;
             line-height: 40px;
             background-color: #2195de;
             padding: 0 25px;
             position: relative;

             /* 给父元素添加3D的属性 */
             transform-style: preserve-3d;
             transition: 2s;
             transform-origin: top;
         }

         nav > a > span::after {
             /* 获取属性的内容 */
             content: attr(data_hover);
             position: absolute;
             top:100%;
             left: 0;
              height: 100%;
              width: 100%;
              background-color:  #0965a0;
              transform: rotateX(-90deg);
              transform-origin: top;
              
         }

         nav > a:hover > span {
             /* translateY 向上平移 20 是为了和中心线对齐 */
             transform: rotateX(90deg) translateY(-20px);
         }



    
    </style>
</head>
<body>

    <nav>
        <a href="#">
            <span data_hover="CC">音乐</span>
        </a>
        <a href="#">
                <span data_hover="一杯仙气">影视</span>
            </a>
    </nav>
    
</body>

Untitled.gif

动画 `animation`

animation:动画名称动画时间运动曲线何时开始播放次数是否反方向;
animation-name动画名称
animation -duration完成动画的时间
animation-timing-function 动画速度曲线
animation-delay 动画延迟的时间
animation-iteration-count动画的播放次数 animation-iteration-count:infinite是无线循环
animation-direction 动画下个周期是否逆向播放
- normal正常 | reverse反向运行 | alternate先正向在反向
animation-play-state动画是否正在执行或者暂停
animation-fill-mode 动画结束要保持的状态


 div{
            width: 200px;
            height: 200px; 
            background-color: yellowgreen;
            animation: cc_animation 2s linear infinite;
            
        }
        /*
         @-o-keyframes; 
        @-moz-keyframes; 火狐浏览器
        @-webkit-keyframes  谷歌 Safari
        */

  @keyframes cc_animation{
    
    //开始做动画的属性
        form{
       }
//结束做动画的属性
       to {
      }
  }
        @keyframes cc_animation{
            0% {
                background-color: rebeccapurple;
                transform: translateX(0);
            }
            25% {
                background-color: blue;
                transform: translateX(200px);
            }
            50% {
                background-color: pink;
                transform: translateX(350px);
            }
            75% {
                background-color: palevioletred;
                transform: translateX(600px);
            }
            100% {
                background-color: yellowgreen;
                transform: translateX(700px);
            }
        }

Untitled.gif

CSS中的过渡/形变/动画

1.过渡(`transition`)

2. `transform` 形变

平移 translate(x, y)

旋转 rotate(deg) 有单位

倾斜 `skew`

缩放`scale`

3D效果

3D旋转 `rotate3d(x,y,z,angle)`

3D平移 `transform: translate3d(x,y,z)`

翻转导航

动画 `animation`

猜你喜欢

热点阅读

CSS中的过渡/形变/动画

1.过渡(transition)

2. transform 形变

平移 translate(x, y)

旋转 rotate(deg) 有单位

倾斜 skew

缩放scale

3D效果

3D旋转 rotate3d(x,y,z,angle)

3D平移 transform: translate3d(x,y,z)

翻转导航

动画 animation

猜你喜欢

热点阅读

1.过渡(`transition`)

2. `transform` 形变

倾斜 `skew`

缩放`scale`

3D旋转 `rotate3d(x,y,z,angle)`

3D平移 `transform: translate3d(x,y,z)`

动画 `animation`