CSS3动画之百度钱包
百度钱包的步骤:
1.建一个盒子,里面放两个盒子,代表正反面,两个盒子叠一起,正面层次高
2.当鼠标Hover时,正面盒子从0deg->-180deg,反面盒子从-180deg->0deg
3.正反面盒子都设置背面隐藏backface-visibility HTML结构:
div.box>div.z+div.f CSS:
.box{
width: 300px;
height: 300px;
position: relative;
}
.z,.f{
width: 300px;
height: 300px;
position: absolute;
background: url("image/bdbg.png") no-repeat left bottom;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.z{
z-index:;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.f{
background-position: -305px bottom;
z-index:;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.box:hover .z{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.box:hover .f{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
CSS3动画之百度钱包的更多相关文章
- CSS3动画详解(超详细)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- CSS3动画详解(图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...
- CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现
前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
- CSS3 动画的一些属性
定义式 @keyframes 动画名称{ from{ } to{ } } 调用式 动画类似函数,只定义不调用是没效果的,所以要配合调用式使用. animation: 动画名称 动画时间 延时 时间曲线 ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
随机推荐
- setTimeout与setInterval方法的区别
setTimeout与setInterval方法的区别 setTimeout()用于设定在指定的时间之后执行对应的函数或代码.,在全局作用域下执行 setTimeout(code,time[,args ...
- Identify Smith Numbers
Link: https://www.hackerrank.com/challenges/identify-smith-numbers def sum_digits(n): return sum(int ...
- [CSAPP]并发与并行
学了这么久的计算机,并发与并行的概念理解的一直不够透彻.考研复习那会儿,以为自己懂了,然而直到看了CSAPP才算是真正明白了这俩个概念. 并发(concurrency) 流X和流Y并发运行是指,流X在 ...
- nginx网站架构优化思路(原)
本人接触的优化主要分为三大类 黑体的为本模块下的重点 ---------------安全优化 安全在生产场景中是第一位的 1.1 站点目录权限的优化 (修改权限755 644 所属用户root,需要 ...
- LeetCode_Convert Sorted Array to Binary Search Tree
Given an array where elements are sorted in ascending order, convert it to a height balanced BST. /* ...
- C51函数的递归调用
前几天在写C51程序时用到了递归,简单程序如下: void WRITE_ADD(uchar addr,uchar wbyte) { START(); //先发送起始信号 WRITE_BYTE(0xa0 ...
- shell下有操作json对象的库
http://kernelpanic.im/blog/2012/03/08/shell-manipulate-json/ Json.org推荐了两个:Jshon和JSON.sh 其中JSON.sh是完 ...
- 在Visual Studio Express 2013中开发自定义控件
在专业版本中,新建项目时有"Windows Control Library"这样一个类型可以用于新建自定义控件项目. 但是Express版本中,没有这样一个类型可供选择.这里有另外 ...
- Python Cookie HTTP获取cookie并处理
Cookie模块同样是Python标准库中的一员,它定义了一些类来解析和创建HTTP 的 cookie头部信息. 一.创建和设置Cookie >>> import Cookie #导 ...
- poj 3685 Matrix(二分搜索之查找第k大的值)
Description Given a N × N matrix A, whose element × i + j2 - × j + i × j, you are to find the M-th s ...