图片触及翻转效果 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>

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java正则匹配空格_js正则表达式匹配空格

    Java正则匹配空格_js正则表达式匹配空格需求针对tab键带来的多个空格问题,有时候我们针对带空格的一行数据要进行切割,如果有多个空格就会出现就会切割空格出现,我们想把空格都去掉,所以需要用到某些方法。解决方案利用正则表达式来匹配空格\\s+首先利用split(“\\s+”);方法来对字符串切割,尽可能的匹配空格,这里也挺有意思,因为空格数目不一样,可以动态变换匹配的空格数量,这个实现原理可以看看底层原理,挺有意思。测试:

  • Nginx配置文件(nginx.conf)配置详解

    Nginx配置文件(nginx.conf)配置详解Nginx的配置文件nginx.conf配置详解如下:usernginxnginx;Nginx用户及组:用户组。window下不指定worker_processes8;工作进程:数目。根据硬件调整,通常等于CPU数量或者2倍于CPU。error_loglogs/error.log;error_loglogs/error.logno

  • 人人网面试经历「建议收藏」

    人人网面试经历「建议收藏」对于一年开发经验的程序员来说是非常尴尬的,经过一个月的面试总结,也快入职心仪的公司了,差不多算是敲定了工作。所以想到陆续的放出一些互联网公司的面试经验来,虽然面不上,但是可提供给别人参阅,以便你们遇到类似或者同一家的公司能够见招拆招!

  • MySQL配置允许远程连接

    MySQL默认在本地loaclhost登录root用户,然而远程连接却会报错(root@1X.X.X.Xacessdenied)。这里就需要进行配置允许远程连接才行,配置方法如下:打开cmd,输入命令,登录数据库:”mysql-uroot-p”,输入数据库登录密码:2.输入授权命令:”grantallprivilegeso…

  • 使用Diskgenius将U盘分区,分为启动盘和文件存储两大功能详解

    使用Diskgenius将U盘分区,分为启动盘和文件存储两大功能详解DiskGenius是一款集分区办理与数据规复功效的东西软件。它是在最初的DOS版的底子上开辟而成的。准备工作:1.DiskGenius软件2.带有系统的U盘(我是用ULtraISO软件将ISO镜像写入到U盘的,方法:http://jingyan.baidu.com/article/a948d651b0f6a20a2dcd2eae.html)3.电脑第一步:将U盘中的系

  • Map集合和List集合总结

    Map集合和List集合总结Map集合和List集合哪个效率更高List接口List集合是一个元素有序(存储有序)、可重复的集合,集合中的每个元素都有对应的索引,以便于查询和修改,List集合是允许存储null值的。List集合可重复原因,请看源码:publicbooleanadd(Ee){ ensureCapacityInternal(size+1);//IncrementsmodCount!…

发表回复

您的电子邮箱地址不会被公开。

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