正反两面展示效果

<!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的更多相关文章

  1. Matplotlib数据可视化（7）：图片展示与保存

    In [1]: import os import matplotlib.image as mpimg from PIL import Image import matplotlib.pyplot as ...

  2. CSS3：RGBA的使用方法

    1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...

  3. 从天猫和支付宝身上学习opcity与rgba

    不知道什么时候,一个双层透明的对话框悄然流行了起来. 我们在各大网站上都能见到类似这样的对话框: 这样的聚焦更明显,用户体验更好,也显得更加的高大上. 先说点题外话,这种布局如何用CSS+DIV去实现 ...

  4. 真~让IE8支持background: rbga; ，IE8下兼容rgba颜色的半透明背景

    IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...

  5. rgba()兼容IE8

    CSS: //一般的高级浏览器都支持 background: rgba(255,255,255,0.1); //IE8下 filter:progid:DXImageTransform.Microsof ...

  6. opacity与RGBA透明的区别

    为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度 ...

  7. 给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 ...

  8. css3新特性@rgba

    1.rgba也经常在实际应用中使用,它主要是在原来rgb的基础上添加了一透明度.但是他又和opacity又有一些差别,主要体现在对子元素的透明度的影响上. 例如:使用opacity和backgroun ...

  9. 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  10. ie8不兼容rgba的解决

    借鉴................. 在调试ie8兼容性的问题时,发现ie8不支持rgba. 关于rgba(),即为颜色设置的方法函数,rgb代表颜色,a代表透明度. 如rgba(0,0,0,0.1 ...

随机推荐

  1. Node_进阶_7

    Node进阶第七天 一.复习 一.索引   数据库中,根据一个字段的值,来寻找一个文档,是很常见的操作.比如根据学号来找一个学生.这个学号是唯一的.只要有学号,就能唯一确认一个学生的文档.学号这个属性 ...

  2. tf.slice()解释

    转载:https://www.jianshu.com/p/71e6ef6c121b def slice(input_, begin, size, name=None): 其中“input_”是你输入的 ...

  3. mac同时享受教育优惠和免手续费分期

    神奇地址:工商银行  http://store.apple.com/cn_icbc_edu招商银行  http://store.apple.com/cn_cmb_edu农业银行  http://sto ...

  4. WPF 列表自动换行

    原文:WPF 列表自动换行 本文告诉大家如何在 ListView 或 ListBox 使用 WrapPanel 让里面的控件自动换行 在 WPF 可以通过修改 ItemsPanel 设置使用不同的 I ...

  5. Object-C,NSURL,统一资源定位器

    今天晚上最后一个例子,写完休息娱乐一会. URL,统一资源定位器,可以定位网络上的一个资源. 没啥难的,还是对象.方法.API.和Java等语言没有啥区别. 不亲自一点点写一遍,印象不深,今后进一步深 ...

  6. 2019年北航OO第二单元（多线程电梯任务）总结

    一.三次作业总结 1. 说在前面 对于这次的这三次电梯作业,我采用了和几乎所有人都不同的架构:将每个人当作一个线程.这样做有一定的好处:它使得整个问题的建模更加自然,并且在后期人员调度变得复杂时,可以 ...

  7. deque迭代器失效的困惑？

    在实现LRU算法的时候lru_list 開始用的是deque 可是由于害怕其在插入删除上的迭代器失效情况的诡异情况.遂用list取代之. 在数据量比較大的时候性能不是非常好.性能优化分析的时候决定用d ...

  8. hdu5391Zball in Tina Town

    //求(n-1)!%n //n 为合数,答案为0,n为素数 . 威尔逊定理可得 //判定一个自然数是否为素数的充分必要条件. 即:当且仅当p为素数时:( p -1 )! ≡ -1 ( mod p ) ...

  9. 数学之路-python计算实战(6)-numpy-ndarray

    >>>> mya=np.zeros(shape=(2,2)) >>>> mya array([[ 0.,  0.], [ 0.,  0.]]) > ...

  10. php使用flock堵塞写入文件和非堵塞写入文件

    php使用flock堵塞写入文件和非堵塞写入文件 堵塞写入代码:(全部程序会等待上次程序运行结束才会运行,30秒会超时) <?php $file = fopen("test.txt&q ...