美文网首页各种喜欢的Web视觉艺术
CSS中的过渡/形变/动画

CSS中的过渡/形变/动画

作者: 追逐_chase | 来源:发表于2019-08-22 17:13 被阅读23次
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中的过渡/形变/动画

    本文链接：https://www.haomeiwen.com/subject/iinvsctx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    各种喜欢的

    Web

    视觉艺术

    关于我们|服务条款|联系我们|CSS中的过渡/形变/动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！