3d图片切换(css3帧动画)
效果带抖动翻转隐藏,使用帧动画
<!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帧动画)的更多相关文章
- 精致3D图片切换效果,最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
- CSS3帧动画
在前面的文章中也有介绍过css3动画的内容,可见<关于transition和animation>和<webkitAnimationEnd动画事件>,今天又要唠叨一下这个东西了, ...
- Css3帧动画深入探寻,讲点项目中实际会碰到的问题
先加个副标题XD --如何解决background-size为100%下处理@keyframes 正是在项目中遇到副标题,才引起我更深入的探寻 先略带一下基本的css3动画 css3的动画实现是通过属 ...
- android图片切换ImageSwichter的动画切换效果
activity_main.xml 控件的线性布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...
- android图片闪烁或帧动画
remote_recording_transition.xml 文件 <?xml version="1.0" encoding="utf-8"?> ...
- jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
- 9个超绚丽的HTML5 3D图片动画特效
在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...
- css3的帧动画
概述 前几天刚好看到一个用了CSS3帧动画的页面,对它非常感兴趣,就研究了一下,记录在下面,供以后开发时参考,相信对其他人也有用. PS:以后别人问我用过什么CSS3属性的时候,我也可以不用说常见的a ...
随机推荐
- 【无私分享:ASP.NET CORE 项目实战(第五章)】Repository仓储 UnitofWork
目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 本章我们来创建仓储类Repository 并且引入 UnitOfWork 我对UnitOfWork的一些理解 UnitOfW ...
- C# - 多线程 之 进程与线程
并行~并发 并发 Concurrency,逻辑上的同时发生,一个处理器(在不同时刻或者说在同一时间间隔内)"同时"处理多个任务.宏观上是并发的,微观上是按排队等待.唤醒.执行的步骤 ...
- C#开发微信门户及应用(5)--用户分组信息管理
在上个月的对C#开发微信门户及应用做了介绍,写过了几篇的随笔进行分享,由于时间关系,间隔了一段时间没有继续写这个系列的博客了,并不是对这个方面停止了研究,而是继续深入探索这方面的技术,为了更好的应用起 ...
- Yii 2.x 日志记录器-类图
- 快来熟练使用 Mac 编程
熟练使用工具,可以提高一个人的做事效率- 1. iTerm2快捷键使用 ⌘ + d: 垂直分屏,⌘ + shift + d: 水平分屏. ⌘ + ]和⌘ + [在最近使用的分屏直接切换.而⌘ + op ...
- windows上如何搭建Git Server
Git在版本控制方面,相比与SVN有更多的灵活性,对于开源的项目,我们可以托管到Github上面,非常方便,但是闭源的项目就会收取昂贵的费用.那么私有项目,如何用Git进行代码版本控制呢?我们可以自己 ...
- 初识html5的localStorage本地存储
一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...
- EasyUI+Knockout实现经典表单的查看、编辑
此文章是基于 1. 搭建SpringMVC+Spring+Hibernate平台 2. 自制xml实现SQL动态参数配置 3. 利用DetachedCriteria构建HQL参数动态匹配 4. 常用日 ...
- Vector Tile
Mapbox Vector Tile Specification A specification for encoding tiled vector data. <?XML:NAMESPACE ...
- VisualStudio 调试Linux
微软自从换了CEO之后,拥抱开源的步伐真实越来越快了,这部,现在VS可以跟踪Linux程序了 http://blogs.msdn.com/b/vcblog/archive/2015/11/18/ann ...