zoukankan      html  css  js  c++  java
  • 制作翻转效果动画

    html页面:

    <div class="box start_3_1" title="点击翻面">

                <img src="images/bg1.jpg" alt="纸牌正面" class="list flip" />
                <img src="images/1.jpg" alt="纸牌背面" class="list flip out" />

            </div>

    css样式:

    .list {
        position: absolute;
        z-index:20000;
    }

    .flip {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0);
    backface-visibility: hidden;
    transform: translateX(0);
    }
    .flip.out {
    -webkit-transform: rotateY(-90deg) scale(.9);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 175ms;
    transform: rotateY(-90deg) scale(.9);
    animation-name: flipouttoleft;
    animation-duration: 175ms;
    }
    .flip.in {
    -webkit-animation-name: flipintoright;
    -webkit-animation-duration: 225ms;
    animation-name: flipintoright;
    animation-duration: 225ms;
    }

    @-webkit-keyframes flipouttoleft {
        from { -webkit-transform: rotateY(0); }
        to { -webkit-transform: rotateY(-90deg); }
    }
    @keyframes flipouttoleft {
        from { transform: rotateY(0); }
        to { transform: rotateY(-90deg); }
    }


    @-webkit-keyframes flipintoright {
        from { -webkit-transform: rotateY(90deg); }
        to { -webkit-transform: rotateY(0); }
    }
    @keyframes flipintoright {
        from { transform: rotateY(90deg); }
        to { transform: rotateY(0); }
    }


    js部分:

    setInterval(function(){
                $(".start_3_1 img").eq(0).removeClass("in").addClass("out");
                $(".start_3_1 img").eq(1).removeClass("out").addClass("in");
                setTimeout(function(){
                    $(".start_3_1 img").eq(0).removeClass("out").addClass("in");
                    $(".start_3_1 img").eq(1).removeClass("in").addClass("out");                
                },2500);
            },4000);

    效果例如以下:



    还能够參考网址http://www.jb51.net/css/296946.html

  • 相关阅读:
    selenuim
    selenium
    selenium
    selenium
    【OSG】 报错:丢失osg100-osgDB.dll
    无法启动此程序,因为计算机中丢失 zlibd.dll【OSG】
    无法打开mfc120.lib
    jquery中的$("#id")与document.getElementById("id")的区别
    arcgis api for javascript 各个版本的SDK下载
    ajax与servlet交互(通过JSON),JAVA的arraylist传到前端的方法
  • 原文地址:https://www.cnblogs.com/yfceshi/p/7351623.html
Copyright © 2011-2022 走看看