zoukankan      html  css  js  c++  java
  • css3水平翻转

    @keyframes cardFront { 0%40%100% {
    02     opacity:1;
    03     -webkit-transform:rotateY(0deg);
    04     -moz-transform:rotateY(0deg);
    05     -ms-transform:rotateY(0deg);
    06     transform:rotateY(0deg)
    07 }
    08 50%90% {
    09     opacity:1;
    10     -webkit-transform:rotateY(-180deg);
    11     -moz-transform:rotateY(-180deg);
    12     -ms-transform:rotateY(-180deg);
    13     transform:rotateY(-180deg)
    14 }
    15 }
    16  
    17 @keyframes cardBack { 0%40% ,100% {
    18     opacity:1;
    19     -webkit-transform:rotateY(-180deg);
    20     -moz-transform:rotateY(-180deg);
    21     -ms-transform:rotateY(-180deg);
    22     transform:rotateY(-180deg)
    23 }
    24 50%90% {
    25     opacity:1;
    26     -webkit-transform:rotateY(0deg);
    27     -moz-transform:rotateY(0deg);
    28     -ms-transform:rotateY(0deg);
    29     transform:rotateY(0deg)
    30 }
    31 }
    32 .fan{ width:300pxheight:100pxposition:relative;}
    33 .fan div{ width:300px;height:100pxcolor:#fff;text-align:center;line-height:100px;position:absolute;left:0;top:0;backface-visibility:hidden;}
    34 .f1background:red; animation:7s linear 2normal both infinite running cardFront;}
    35 .f2background:green; animation:7s linear 2normal both infinite running cardBack;}
    01 <div class="fan">
    02     <div class="f1">前端老徐图片翻转特效--正面</div>
    03     <div class="f2">我是反面</div>
    04 </div>
    全部教程http://each.sinaapp.com/angular/index.html
  • 相关阅读:
    运算符
    初始编码
    python文件操作
    波士顿房价预测
    机器学习基础-数理统计
    linux基础命令--userdel 删除用户帐户和相关文件
    linux基础命令--rmdir 删除空目录
    linux基础命令--groupdel 删除群组
    linux基础命令--groupadd 创建新的群组
    linux基础命令--groupmod 修改组定义
  • 原文地址:https://www.cnblogs.com/xfdmb/p/6004768.html
Copyright © 2011-2022 走看看