图片触及翻转效果 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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • drawcall优化_unity降低drawcall

    drawcall优化_unity降低drawcallunity3D对于移动平台的支持无可厚非,但是也有时候用Unity3D开发出来的应用、游戏在移动终端上的运行有着明显的效率问题,比如卡、画质等各种问题。自己在做游戏开发的时候偶有所得。对于主要影响性能的因素做个总结。主要因素有:       1.     Savedbybatching值过大  —->这个值主要是针对Mesh的批处理,这个值越高,应用就越卡

    2022年9月2日
    3
  • read函数的用法

    read函数的用法原文出自:https://blog.csdn.net/zbk840901528/article/details/7849644非常感谢网友的分享,对本人很有帮助,谢谢!!!read的用法read函数可以读取文件。读取文件指从某一个已打开地文件中,读取一定数量地字符,然后将这些读取的字符放入某一个预存的缓冲区内,供以后使用。使用格式如下:number=read(handle,buff…

    2022年6月22日
    297
  • 数据库 分区表详解

    数据库 分区表详解如果你的数据库中某一个表中的数据满足以下几个条件,那么你就要考虑创建分区表了。1、数据库中某个表中的数据很多。很多是什么概念?一万条?两万条?还是十万条、一百万条?这个,我觉得是仁者见仁、智者见智的问题。当然数据表中的数据多到查询时明显感觉到数据很慢了,那么,你就可以考虑使用分区表了。如果非要我说一个数值的话,我认为是100万条。2、但是,数据多了并不是创建分区表的惟一条件,哪怕你有一千万条记录,但

    2022年6月6日
    35
  • 用ESC/P控制码,怎样向喷墨打印机传送图形数据啊,包括颜色信息?

    用ESC/P控制码,怎样向喷墨打印机传送图形数据啊,包括颜色信息?

    2021年7月28日
    51
  • from django.db import models_django请求响应流程图

    from django.db import models_django请求响应流程图前言APIView中的dispatch是整个请求生命过程的核心方法,包含了请求模块,权限验证,异常模块和响应模块,我们先来介绍请求模块请求模块:request对象源码入口APIView类中di

    2022年7月29日
    5
  • java中的jQuery与Ajax的应用,菜鸟教程

    一、简介   1. Ajax,并不是指一种单一的技术,而是有机的利用了一系列交互式网页应用相关的技术所形成的结合体。Ajax揭开了无刷新更新页面的新时代,并有代替系统的Web方式和通过隐藏的框架来进行异步提交的趋势,是Web开发应用的一个里程碑。Ajax全称(AsynchronousJavaScriptandXML),即异步JavaScript和XML。实现客户端异步请求操作,不刷新整个…

    2022年4月8日
    36

发表回复

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

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