zoukankan      html  css  js  c++  java
  • css3 贝塞尔曲线动画

     

     上面图标初始加载的时候,呈:奇数从左上淡现,偶数车左下呈现。

                 <div>
                                <ul class="trantion" v-for="(item,index) in dataLI" @click="handelIdex(index)">
                                    <li :class="'trantiones'+ (intx == index ? 'actives' : '')">{{item.name}}</li>
                                </ul>
                            </div>
    //改变激活对应的intx,我这里只是一个简单的deom,其主要应用css3动画的贝塞尔曲线
        .trantion li{
             20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            border:1px solid black;
            opacity: 0;
            transform: scale(0);//主要动画
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transition: all .8s cubic-bezier(.4,0,.2,1);//贝塞尔曲线
            -webkit-transition: all .8s cubic-bezier(.4,0,.2,1);
            -moz-transition: all .8s cubic-bezier(.4,0,.2,1);
            -o-transition: all .8s cubic-bezier(.4,0,.2,1);
            -ms-transition: all .8s cubic-bezier(.4,0,.2,1);
    
        }
    .trantion .trantiones{
        opacity: 1;
        transform: scale(1);
        }
    .trantion li .actives{
        transform: scale(1);
    }
    .trantion li:nth-child(2n){
        transform-origin: left top;
    }
    .trantion li:nth-child(2n){
        transform-origin: left bottom;
    }
    

      

      

  • 相关阅读:
    JZOJ5809 数羊
    P3313 [SDOI2014]旅行
    2019.10.22 NOIP模拟测试 day2
    P4322 [JSOI2016]最佳团体
    P1850 换教室
    P3225 [HNOI2012]矿场搭建
    P2607 [ZJOI2008]骑士
    2019.10.21 NOIP模拟测试 day1
    AFO
    禁止加载浏览器图片
  • 原文地址:https://www.cnblogs.com/wangliko/p/12069334.html
Copyright © 2011-2022 走看看