rgba
正反两面展示效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
/*要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上 规定效果的时长*/
@-webkit-keyframes move
{/*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
*/
0%{
-webkit-transform:rotateX(0deg) scale(0);
-webkit-animation-timing-function:3s;/*规定动画的速度曲线。默认是 "ease"。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。*/
}
100%
{
-webkit-transform:rotateX(360deg) scale(1);
}
}
body
{
background:url(Images/miaov.jpg) no-repeat center 0; width:1024px; margin:0 auto; padding-top:127px; position:relative;
}
ul,h2
{
margin:0; padding:0;
}
li
{
list-style:none;
}
.page
{
width:400px; height:300px; margin:100px auto 0; position:relative;
-webkit-perspective:800;/*定义 3D 转换元素的透视视图。*/
-webkit-transform-style:preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现。有两个值：flat：所有子元素在 2D 平面呈现。preserve-3d：保留3D空间。*/
}
#box
{
width:400px; height:300px;-webkit-transition:1s -webkit-transform linear; /*改变些容器的样式时的动画效果*/
-webkit-transform:rotateY(0) rotateX(0);
/*-webkit-animation-name:"move";
-webkit-animation-duration:2s;*/
-webkit-animation:move 2s;/*您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。*/
-webkit-transform-style:preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现。*/
}
#box div
{
width:400px; height:300px; position:absolute; left:0; top:0;box-shadow:1px 2px 7px #999;
} h2
{
height:60px; line-height:60px; font-size:40px; color:#fff;background:rgba(0,0,0,0.3); text-indent:10px; position:absolute; bottom:0; left:0; width:100%; font-family:'Microsoft YaHei'; letter-spacing:5px; font-weight:normal;
}
.div
{
background:url(Images/html5.png) no-repeat; -webkit-transform:rotateY(180deg); /*图层是透明的*/
}
.div2
{
background:url(Images/miaov_bg.png) no-repeat; -webkit-transform:translateZ(1px); /*沿Z方向移动,前后两层错开,使之不在同一平面上*/
}
.page:hover #box
{
-webkit-transform:rotateY(180deg) rotateX(0);
} </style>
</head>
<body>
<div class="page">
<div id="box">
<div class="div"><h2>我是反面</h2></div>
<div class="div2"><h2>我是正面</h2></div>
</div>
</div>
</body>
</html>
rgba的更多相关文章
- Matplotlib数据可视化（7）：图片展示与保存
In [1]: import os import matplotlib.image as mpimg from PIL import Image import matplotlib.pyplot as ...
- CSS3：RGBA的使用方法
1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...
- 从天猫和支付宝身上学习opcity与rgba
不知道什么时候,一个双层透明的对话框悄然流行了起来. 我们在各大网站上都能见到类似这样的对话框: 这样的聚焦更明显,用户体验更好,也显得更加的高大上. 先说点题外话,这种布局如何用CSS+DIV去实现 ...
- 真~让IE8支持background: rbga; ，IE8下兼容rgba颜色的半透明背景
IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...
- rgba()兼容IE8
CSS: //一般的高级浏览器都支持 background: rgba(255,255,255,0.1); //IE8下 filter:progid:DXImageTransform.Microsof ...
- opacity与RGBA透明的区别
为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度 ...
- 给div设置background-color: rgba(0, 0, 0, 0.2)属性，并加了css3动画--opacity动画淡出动画，之后div子元素的字体会抖一下
问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...
- css3新特性@rgba
1.rgba也经常在实际应用中使用,它主要是在原来rgb的基础上添加了一透明度.但是他又和opacity又有一些差别,主要体现在对子元素的透明度的影响上. 例如:使用opacity和backgroun ...
- 兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
- ie8不兼容rgba的解决
借鉴................. 在调试ie8兼容性的问题时,发现ie8不支持rgba. 关于rgba(),即为颜色设置的方法函数,rgb代表颜色,a代表透明度. 如rgba(0,0,0,0.1 ...
随机推荐
- 堆(Heap)-c实现
这个堆的实现采用数组存储的完全二叉树实现. 最近有点烦躁,先是跳槽到了一个外包公司,感觉2016有点坑,另外一件事就是老婆怀孕了,但是在家里没人照顾,很担心. 这个堆的实现就暂时不优化了,基本的插入, ...
- Python 语言中经常有疑惑的地方
*)关于for循环中range(2),i到底是从0还是1开始.特别是在用数组的长度作为range的参数的时候经常会犯糊涂 #首先 >>> for i in range(5): ... ...
- 题解 P2532 【[AHOI2012]树屋阶梯】
本题运用卡特兰数求解. 卡特兰数有两种表达方式: 1)\(h_i=\sum^{k=0}_{i-1}h_kh_{i-k-1}\) 2)\(h_i=\frac{1}{n+1}C^{n}_{2n}\) 运用 ...
- 洛谷 P2738 [USACO4.1]篱笆回路Fence Loops
P2738 [USACO4.1]篱笆回路Fence Loops 题目描述 农夫布朗的牧场上的篱笆已经失去控制了.它们分成了1~200英尺长的线段.只有在线段的端点处才能连接两个线段,有时给定的一个端点 ...
- 洛谷 P2744 [USACO5.3]量取牛奶Milk Measuring
P2744 [USACO5.3]量取牛奶Milk Measuring 题目描述 农夫约翰要量取 Q(1 <= Q <= 20,000)夸脱(夸脱,quarts,容积单位——译者注) 他的最 ...
- Angry IP Scanner 获取设备的IP
给大家介绍一款软件Angry IP scanner,这款软件最大的用处就是能够扫描某一网段的各个主机的ip.通过使用发现,原理就是通过高速的ping每一个ip,假设有主机存在.就获取这个主机的user ...
- 【POJ 1845】 Sumdiv (整数唯分+约数和公式+二分等比数列前n项和+同余)
[POJ 1845] Sumdiv 用的东西挺全 最主要通过这个题学了约数和公式跟二分求等比数列前n项和 另一种小优化的整数拆分 整数的唯一分解定理: 随意正整数都有且仅仅有一种方式写出其素因子的乘 ...
- 赵雅智：android教学大纲
带下划线为详细内容链接地址.点击后可跳转.希望给大家尽一些微薄之力.眼下还在整理中 教学章节 教学内容 学时安排 备注 1 Android高速入门 2 Android模拟器与常见命令 3 Androi ...
- MFC中CFileDialog使用方法
用CFileDialog选择了一个文件后,使用FILE::fopen打开文件错误,使用 的是相对地址.和王工调试了半天,怎么跟踪也没发现错误,原来如此. .... .. . . CFileDialog ...
- nyoj--1170--最大的数（数学技巧）
最大的数 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 小明和小红在打赌说自己数学学的好,于是小花就给他们出题了,考考他们谁NB,题目是这样的给你N个 ...