图片触及翻转效果 css3

图片触及翻转效果 css3

实现图片由左向右飞入回到最初设定位置 ,鼠标浮上去旋转显示另一张图片效果;

html:

     

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
        <title>图片翻转CSS3</title>
    
    </head>
    <body>
        <div class="page">
            <ul id="box">
                <li>
                    <div class="div1">
                        <img src="Images/m.png" alt=""/></div>
                </li>
                <li>
                    <span></span><div class="div2">
                        <img src="Images/w.png" alt=""/></div>
                </li>
                <li>
                    <span></span><div class="div3">
                        <img src="Images/k.png" alt=""/></div>
                </li>
                <li>
                    <span></span><div class="div4">
                        <img src="Images/t.png" alt=""/></div>
                </li>
            </ul>
        </div>
       
    </body>
</html>

 

2. css部分:

@-webkit-keyframes "mixovMove"
        {
   
            0%
            {
                -webkit-animation-timing-function:ease;
                left:-300px;
                -webkit-transform:rotateY(0deg) scale(0);
                opacity:0;
            }
            50%
            {
   
                left:700px;
                -webkit-transform:rotateY(0deg) scale(0.4);
                opacity:1;
            }
            100%
            {
   
                -webkit-transform:rotateY(360deg) scale(1);
            }
        }
        html
        {
   
            height:100%; margin:0 auto; position:relative;
        }
        body
        {
   
            background:url(Images/miaov.jpg) no-repeat center 0; margin:0 auto; overflow:hidden; padding-top:128px;
        }
        ul
        {
   
            margin:0; padding:0;
        }
        li
        {
   
            list-style:none;
        }
        .page
        {
   
            height:615px; background:url(Images/1-bg.png) no-repeat;position:relative;overflow:hidden; -webkit-transform-style:preserve-3d;-webkit-perspective:100;  margin:0 auto; width:1024px; /*子元素获得透视效果perspective 属性只影响 3D 转换元素。*/
        }
        #box
        {
   
            width:760px; height:170px; position:absolute; top:150px; left:132px;
        }
        li
        {
   
            float:left; margin:0 10px; width:170px; height:170px; position:relative;
        }
        #box div
        {
   
            width:170px; height:170px; -webkit-transform:translateZ(-100px) rotateY(0deg); -webkit-transition:300ms -webkit-transform linear;
        }
        #box span
        {
   
            position:absolute; left:0; top:0; width:170px; height:170px;
        }
        #box img
        {
   
            display:none; -webkit-transform:rotateY(180deg);
        }
        .div1
        {
   
            background:url(Images/c.png) no-repeat;
        }
        .div2
        {
   
            background:url(Images/s-1.png) no-repeat;
        }
        .div3
        {
   
            background:url(Images/s-2.png) no-repeat;
        }
        .div4
        {
   
            background:url(Images/3.png) no-repeat;
        }

3.js部分: 

<script>
            window.onload = function () {
   
                var oBox = document.getElementById("box");
                var aLi = oBox.getElementsByTagName("li");
                var aImg = oBox.getElementsByTagName("img");
                var aDiv = oBox.getElementsByTagName("div");
                for (var i = 0; i < aLi.length; i++) { 
                    aLi[i].left = aLi[i].offsetLeft;
                    aLi[i].style.left = "-200px";
                    aLi[i].style.top = "0";
                    aLi[i].index = i;
                    aLi[i].oTimer = null;
                    aLi[i].style["WebkitTransform"] = "rotateY(0deg) scale(0)";
                }
                for (var i = 0; i < aLi.length; i++) 
                {
   
                    aLi[i].style.position = "absolute";
                    move(aLi[i], 300 * i); 
                    aLi[i].onmouseover = function () {
                        var oBj = this;
                       // debugger;
                        clearTimeout(oBj.oTimer);
                        oBj.oTimer = setTimeout(function () {
                            aImg[oBj.index].style.display = "block";
                            aDiv[oBj.index].style["WebkitTransform"] = "rotateY(180deg)";  //后执行
                        }, 290);
                        aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)"; //先执行
                    };
                    aLi[i].onmouseout = function ()
                    {
   
                        var oBj = this;
                        clearTimeout(oBj.oTimer);
                        oBj.oTimer = setTimeout(function () {
                            aImg[oBj.index].style.display = "none";
                            aDiv[oBj.index].style["WebkitTransform"] = "rotateY(0deg)";
                        }, 295);
                        aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)";
                    }

                }
            };

            function move(obj, iTime)
            {
   
                var oTimer = null;
                oTimer = setTimeout(function () {
                    obj.style.left = obj.left + "px";
                    obj.style["WebkitTransform"] = "rotateY(0deg) scale(1)";
                    obj.style["WebkitAnimationName"] = "mixovMove";
                    obj.style["WebkitAnimationDuration"] = "2s";

                },iTime)
            }
        </script>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/110093.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • DNS服务器的配置「建议收藏」

    DNS服务器的配置「建议收藏」DNS(DomainNameServer,域名服务器)是进行域名(domainname)和与之相对应的IP地址(IPaddress)转换的服务器。DNS中保存了一张域名(domainname)和与之相对应的IP地址(IPaddress)的表,以解析消息的域名。域名是Internet上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。1、安装…

    2022年6月4日
    37
  • console.log 用法

    console.log 用法

    2021年10月11日
    128
  • 在手写数字识别的例子中_关于人脸识别的案例

    在手写数字识别的例子中_关于人脸识别的案例1.概念介绍:图像识别(ImageRecognition)是指利用计算机对图像进行处理、分析和理解,以识别各种不同模式的目标和对像的技术。 图像识别的发展经历了三个阶段:文字识别、数字图像处理与识别、物体识别。机器学习领域一般将此类识别问题转化为分类问题。手写识别是常见的图像识别任务。计算机通过手写体图片来识别出图片中的字,与印刷字体不同的是,不同人的手写体风…

    2022年9月14日
    0
  • 无法创建新虚拟机: 无法打开配置文件“D:\vmWare_install\centos7\CentOS7.vmx”: 拒绝访问

    无法创建新虚拟机: 无法打开配置文件“D:\vmWare_install\centos7\CentOS7.vmx”: 拒绝访问退出,右键vmware选择以管理员身份运行即可。

    2022年10月23日
    0
  • ip addr命令详解_ip命令详解

    ip addr命令详解_ip命令详解ipaddr命令的作用是在Linux系统上查询ip地址。命令效果如下:解析:lo(loopback)环回接口,常被分配到127.0.0.1,用于本机通信,经过内核处理后直接返回,不会在任何网络中出现。net_deviceflags:LOOPBACK,UP,表示网卡处于启动的状态LOWER_UP物理连接正常,就是网卡已经上电(物理指的是物理层)BROADCAST表示这个网卡有广播地址,可以发送广播包MULTICAST表示网卡可以发送多播包MTU1500是指什么意思呢?是哪一层的

    2022年7月27日
    3
  • Linux抓包命令tcpdump以及常见抓包使用方法[通俗易懂]

    Linux抓包命令tcpdump以及常见抓包使用方法[通俗易懂]系统运行过程中,难免发现服务器一些流量异常或访问异常,我们可以采用tcpdump命令进行抓包。下边简单介绍下该命令使用办法。1,安装tcpdump一些系统默认没有安装,我们需要yum安装下这个命令:yuminstalltcpdump-y2,tcpdump使用。一些使用我们可以tcpdump–help看下帮助,比如:常用的一些简单用法,一般是抓取对应网卡、端口、对应IP等。tcpdump-nn本地网卡地址以及外部链接地址,并采用IP地址、端口表示。如果不加-nn则会…

    2022年6月15日
    57

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号