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;
    }
    

      

      

  • 相关阅读:
    springboot(十二)-分布式锁(redis)
    springboot(十一)-为什么要用springboot
    HashMap和HashTable区别
    ArrayList和LinkedList区别
    springcloud(三)-Eureka
    springboot(十)-监控应用
    springboot(九)-log配置
    springcloud(二)-最简单的实战
    rest版的webservice
    sqlite与android交互 (封装)
  • 原文地址:https://www.cnblogs.com/wangliko/p/12069334.html
Copyright © 2011-2022 走看看