CSS3动画之百度钱包

百度钱包的步骤：1.建一个盒子，里面放两个盒子，代表正反面，两个盒子叠一起，正面层次高2.当鼠标Hover时，正面盒子从0deg->-180deg,反面盒子从-180deg->0deg3.正反面盒子都设置背面隐藏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: 2;-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: 1;-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);}

转载于:https://www.cnblogs.com/shisanjun/p/4827435.html

CSS3动画之百度钱包相关推荐

利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了.比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距).但是不得不佩服百度的设 ...
CSS3动画详解（图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言本文主要内容: 过渡:transition 2D 转换 trans ...
css3动画详解 ——复习（笔记）
本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是过渡. ...
【转载】CSS3动画图文教程
这段时间在学习CSS3的动画,觉得特别有趣,在刷博客的时候看到有个文章写得很详细,于是转载一下~ 感谢原创作者 https://www.cnblogs.com/qianguyihao/p/843518 ...
svg配合css3动画_带有Adobe Illustrator，HTML和CSS的任何网站的SVG动画
svg配合css3动画 A top trend in web design for 2020 is the increased use of SVG animations on web pages a ...
css 右上角翻开动画_27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式.当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多.CSS3动画 ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...

CSS3动画之百度钱包

CSS3动画之百度钱包相关推荐

最新文章

热门文章