效果带抖动翻转隐藏，使用帧动画

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="../css/public.css"/>

        <style type="text/css">

            .wrap{position:relative;width: 400px;height: 300px;margin: 100px auto;-webkit-perspective: 800px;}

            .list{width: 400px;height:300px;-webkit-transform-style: preserve-3d;}

            li{position:absolute;width: 400px;height: 300px;overflow: hidden;-webkit-transform-origin:bottom;opacity:;-webkit-transform: rotateX(-180deg);}

            li a{display: block;width: 400px;height: 300px;}

            img{width: 100%;height: 100%;}

            .prev,.next{position: absolute;top: 130px;width: 60px;height: 30px;text-align: center;line-height: 30px;background: #ccc;cursor: pointer;}

            .prev{left: -100px;}

            .next{right: -100px;}

            @-webkit-keyframes hide{

                0%{

                    -webkit-transform: rotateX(0);

                    opacity: 1;

                }

                100%{

                    -webkit-transform: rotateX(180deg);

                    opacity: 0;

                }

            }

            @-webkit-keyframes show{

                0%{

                    -webkit-transform: rotateX(180deg);

                    opacity: 0;

                }

                50%{

                    -webkit-transform: rotateX(-30deg);

                    opacity: 1;

                }

                60%{

                    -webkit-transform: rotateX(20deg);

                    opacity: 1;

                }

                70%{

                    -webkit-transform: rotateX(-18deg);

                    opacity: 1;

                }

                80%{

                    -webkit-transform: rotateX(15deg);

                    opacity: 1;

                }

                90%{

                    -webkit-transform: rotateX(-8deg);

                    opacity: 1;

                }

                100%{

                    -webkit-transform: rotateX(0deg);

                    opacity: 1;

                }

            }

            .hide{-webkit-animation: 500ms hide;-webkit-transform: rotateX(180deg);opacity: 0;}

            .show{-webkit-animation: 1s show;-webkit-transform: rotateX(0deg);opacity: 1;}

        </style>

        <script type="text/javascript">

            window.onload=function(){

                var oUl=document.getElementById("list");

                var aLi=oUl.getElementsByTagName("li");

                var oPrev=document.getElementById("prev");

                var oNext=document.getElementById("next");

                var num=0;

                aLi[num].className='show';

                oPrev.onclick=function(){

                    aLi[num%aLi.length].className="hide";

                    num--;

                    if(num<0){

                        num=aLi.length-1;

                    }

                    aLi[num%aLi.length].className="show";

                }

                oNext.onclick=function(){

                    aLi[num%aLi.length].className="hide";

                    num++;

                    aLi[num%aLi.length].className="show";

                }

            }

        </script>

    </head>

    <body>

        <div class="wrap">

            <ul class="list" id="list">

                <li><a href="javascript:;"><img src="../img/css31.jpg"/></a></li>

                <li><a href="javascript:;"><img src="../img/css32.jpg"/></a></li>

                <li><a href="javascript:;"><img src="../img/b.jpg"/></a></li>

                <li><a href="javascript:;"><img src="../img/c.jpg"/></a></li>

            </ul>

            <span class="prev" id="prev">上一张</span>

            <span class="next" id="next">下一张</span>

        </div>

    </body>

</html>

3d图片切换（css3帧动画）的更多相关文章

  1. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  2. CSS3帧动画

    在前面的文章中也有介绍过css3动画的内容,可见<关于transition和animation>和<webkitAnimationEnd动画事件>,今天又要唠叨一下这个东西了, ...

  3. Css3帧动画深入探寻，讲点项目中实际会碰到的问题

    先加个副标题XD --如何解决background-size为100%下处理@keyframes 正是在项目中遇到副标题,才引起我更深入的探寻 先略带一下基本的css3动画 css3的动画实现是通过属 ...

  4. android图片切换ImageSwichter的动画切换效果

    activity_main.xml 控件的线性布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...

  5. android图片闪烁或帧动画

    remote_recording_transition.xml 文件 <?xml version="1.0" encoding="utf-8"?> ...

  6. jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

  8. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  9. css3的帧动画

    概述 前几天刚好看到一个用了CSS3帧动画的页面,对它非常感兴趣,就研究了一下,记录在下面,供以后开发时参考,相信对其他人也有用. PS:以后别人问我用过什么CSS3属性的时候,我也可以不用说常见的a ...

随机推荐

  1. Angular2中对ASP.NET MVC跨域访问

    应用场景 项目开发决定使用angular2进行前后端分离开发,由我负责后端服务的开发,起初选择的是web api进行开发.对跨域访问通过API中间件+过滤器对跨域访问进行支持.开发一段后,通知需要移植 ...

  2. Shell脚本编程30分钟入门

    Shell脚本编程30分钟入门 转载地址: Shell脚本编程30分钟入门 什么是Shell脚本 示例 看个例子吧: #!/bin/sh cd ~ mkdir shell_tut cd shell_t ...

  3. WPF 后台数据触发改变界面状态-心跳实现

    今年做的一个上位机工控WPF项目,做个小小的总结把,以后随时来找 请不要带血乱喷,我只是菜鸟.___by 鲍队 类似于这样子的;大致的意思是:一个代码变量,通过改变变量的值,绑定这个变量的这个圆颜色也 ...

  4. C#开发微信门户及应用(25)-微信企业号的客户端管理功能

    我们知道,微信公众号和企业号都提供了一个官方的Web后台,方便我们对微信账号的配置,以及相关数据的管理功能,对于微信企业号来说,有通讯录中的组织架构管理.标签管理.人员管理.以及消息的发送等功能,其中 ...

  5. 调试关于Hibernate的程序遇到的问题

    最怕的就是初学一些东西,低级的错误犯了又犯,现在总结出来以便以后不要再犯类似的错误. 一.Hibernate的延迟加载机制 在用hibernate底层访问数据库的过程忽略了延迟加载机制导致 在访问时候 ...

  6. SharePoint 2010/2013/2016内容数据库与网站集的关系

    总得来说,内容数据库和网站集的关系是: 一个内容数据库里可以有多个网站集,但是一个网站集只能存在于一个内容数据库. 那么问题来了 问题1:我能否在创建网站集时指定内容数据库呢?或者说我能在指定的内容数 ...

  7. android 自定义通知栏

    package com.example.mvp; import cn.ljuns.temperature.view.TemperatureView;import presenter.ILoginPre ...

  8. UITableView cell复用出错问题 页面滑动卡顿问题 & 各杂七杂八问题

    UITableView 的cell 复用机制节省了内存,但是有时对于多变的自定义cell,重用时会出现界面出错(例如复用出错,出现cell混乱重影).滑动卡顿等问题,这里只简单敲下几点复用出错时的解决 ...

  9. 玩转Podfile

    前言 经常使用CocoaPods来管理iOS项目中的第三方库,但是我们要使用CocoaPods来管理第三方库,前提是要写好Podfile文件,通过这个文件来配置第三方库与项目之间的依赖.版本等信息. ...

  10. Java导出excel

    一.介绍 常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际的开发中,很多时候需要实现导入.导出Excel的应用. ...