最近扒了一个有弹性效果上下翻转demo

上图:

上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@-webkit-keyframes show
{
0% {
transform:rotateX(180deg);
opacity:0;
}
50% {
transform:rotateX(-25deg);
opacity:1;
}
60% {
transform:rotateX(18deg);
opacity:1;
}
70% {
transform:rotateX(-13deg);
opacity:1;
}
80% {
transform:rotateX(8deg);
opacity:1;
}
90% {
transform:rotateX(-6deg);
opacity:1;
}
100% {
transform:rotateX(0deg);
opacity:1;
}
}
@-webkit-keyframes hide
{
0% {
transform:rotateX(0deg);
opacity:1;
} 100% {
transform:rotateX(-180deg);
opacity:0;
}
}
*{ margin:0; padding:0;}
li{ list-style: none;}
.box{ position:relative; width:300px; height:200px; margin:100px auto; }
.box-ul,.box li{width:300px; height:200px;}
.box-ul{transform-style:preserve-3d;perspective:800px;}
.box li{ position:absolute; background-size:cover; background-position:-50% -50%;transform:rotateX(180deg);transform-origin:bottom ; opacity:0;}
.box li.show{-webkit-transform:rotateX(0deg);-webkit-animation: show .6s; opacity:1;}
.box li.hide{-webkit-transform:rotateX(180deg); -webkit-animation: hide .6s;opacity:0;}
.box a{ position:absolute; top:50%;transform: translateY(-50%) ; width:50px; height:50px; line-height: 50px; font-size: 14px; text-decoration: none; color:#fff; text-align:center; border-radius:50%; background-color:red;}
.box a:nth-of-type(1){left:-80px;}
.box a:nth-of-type(2){right:-80px;} </style>
<script>
window.onload = function(){ var aA = document.getElementsByTagName('a'),
aLi = document.getElementsByTagName('li');
var len = aLi.length-1,
n = 0; aA[0].onclick = function(){
aLi[n].className = "hide";
n--;
n = n < 0 ? len : n;
aLi[n].className = "show";
}
aA[1].onclick = function(){
aLi[n].className = "hide";
n++;
n = n > len ? 0 : n;
aLi[n].className = "show";
} }
</script>
</head>
<body>
<div class="box">
<ul class="box-ul">
<li class="show" style=" background-image:url(1.jpg)"></li>
<li style=" background-image:url(2.jpg)"></li>
<li style=" background-image:url(3.jpg)"></li>
<li style=" background-image:url(4.jpg)"></li>
<li style=" background-image:url(5.jpg)"></li>
</ul>
<a href="javascript:;">上一张</a>
<a href="javascript:;">下一张</a>
</div>
</body>
</html>

演示:demo

扒代码心得:

初次看到这个效果感觉主要是JS做的

因为翻转上来有弹性运动,直接想的是JS弹性运动 不知道CSS3也可是设置  当时仅仅知道 transition 过去 也知道 animation 仅仅理解成 从 A点到B点

用 ul 用css3 转成 3D (transform-style:preserve-3d)同时加上景深 perspective:800px; (张鑫旭大神对景深的解释:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/  )我个人简单粗暴的理解就是:给了一个三维的视角 ,

rotateX,rotateY,rotateZ 就能 X轴、Y轴、Z轴 设置3D了,换句话说不加其实还是2D平面。

li 初始X轴旋转 transform:rotateX(180deg) 在设置旋转的基点 根据li的底边旋转 (transform-origin:bottom);
然后 分别 有两个 class 分别 show(翻转上来)、hide(翻转下去);同时也写两个 animation 对应 keyframes show,keyframes hide
.show:虽然有keyframes show 运动 但是最后还要设置它的运动的最终点 transform:rotateX(0deg);
.hide:同理
keyframes show 是从 180deg 到 0deg 然后 弹性运动 其实就是 在 50% 的时候 运动 -25deg 10%的频率 来回的设置 deg 达到 弹性的运动,最开始一直这只不好,仔细看别人的代码发现是有规律逐次减少deg,
keyframes hide 仅仅是从 transform:rotateX(0deg); 到 transform:rotateX(-180deg); 同时还有透明度;

剩下的就是 JS 切换给class

 

css3 弹性效果上下翻转demo的更多相关文章

  1. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  2. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  3. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果!

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  4. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  5. CSS3弹性伸缩布局(二)——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  6. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  7. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  9. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

随机推荐

  1. C语言数据类型的转换(隐式转换)

    算术运算符中的转换规则: double ←── float 高↑long↑unsigned↑int ←── char,short 低 注意: 图中横向箭头表示必须的转换,如两个float型数参加运算, ...

  2. HDU - 1698 Just a Hook (线段树区间修改)

    https://cn.vjudge.net/problem/HDU-1698 题意 大小为n的数组,数组元素初始值为1,有q次操作,x,y,z表示从第x到第y所有的元素的值变为z,最后问1到n的和. ...

  3. Mcafee(麦咖啡) 无法升级的解决办法(威流验证)

    McAfee时会遇到更新失败的情况.为了解决这个问题,你需要做如下设置:1.“运行”>“dcomcnfg.exe”2.双击“组件服务>计算机>我的电脑”3.展开“DCOM配置”,打开 ...

  4. 自学python 7.

    内容:join , fromkeys , set , .add , .update , .pop , .remove , 交集(s1&s2) , 并集(s1|s2) , 深浅拷贝 , .cop ...

  5. redis 全局命令 查看所有的键,删除键,检查键是否存在,获取过期时间,键的数据结构类型

    Redis有5中数据结构,他们是键值对中的值,对于键来说,有一些通用的命令: 一.查看所有键 keys * 二.获取键总数:dbsize 三.检查键是否存在 exists 如果存在返回1,不存在返回0 ...

  6. web-hacking

    https://wizardforcel.gitbooks.io/web-hacking-101/content/1.html

  7. luogu P3172 [CQOI2015]选数

    传送门 颓了一小时柿子orz 首先题目要求的是\[\sum_{x_1=l}^{r}\sum_{x_2=l}^{r}...\sum_{x_n=l}^{r}[gcd(x_1,x_2...x_n)=k]\] ...

  8. 用JavaMail通过QQ邮箱来发送邮件(第一篇博客,备忘)

    1.先启用QQ邮箱里POP3/STMP服务:生成授权码 2.导入mail.jar包(不要用太古董的技术,你懂得) 3.注意要在代码里加上开启SSL加密的代码 4.直接上代码 import java.u ...

  9. Luogu P3700「CQOI2017」小Q的表格

    为什么我连分块都想不到啊... 题意 定义一个矩阵$f$满足 $ f(a,b)=f(b,a)$ $ b·f(a,a+b)=(a+b)·f(a,b)$ 初始$ f(a,b)=ab$ 有$ m$次修改,每 ...

  10. 最短路径&次短路径算法

    容易理解:https://blog.csdn.net/m0_37345402/article/details/76695930 https://blog.csdn.net/qq_36386435/ar ...