效果演示

http://demo.qpdiy.com/hxw/CSS3/rotate+light.html

物体旋转：

卡牌同一位置放2张图片，通过设置3D动画旋转实现

animation: cardfront 2s infinite;
-webkit-animation: cardfront 2s infinite;

@keyframes cardfront{
0%{transform: rotateY(0deg);}
50%{transform: rotateY(180deg);}
100%{transform: rotateY(0deg);}
}

@keyframes cardback{
0%{transform: rotateY(180deg);}
50%{transform: rotateY(0deg);}
100%{transform: rotateY(180deg);}
}

光的效果：

@-webkit-keyframes cardlight{
0%{box-shadow: 0 0 0px 0px yellow;}
100%{box-shadow: 0 0 60px 0px yellow;}
}

以下是完整代码

 <style type="text/css">

   .wrap{

     width: 640px;

     margin: 0 auto;

   }

   .cardbg{

     position: relative;

     width: 157px;

     height: 220px;

     transform: rotate(30deg);

     -webkit-transform: rotate(30deg);

   }

   .card-back,.card-front{

     position: absolute;

     left: 0;

     top: 0;

     width: 157px;

     height: 220px;

     backface-visibility: hidden;

     box-shadow: 2px 2px 20px rgba(0,0,0,.5);

   }

   .card-front{

     z-index: 2;

     animation: cardfront 2s infinite;

     -webkit-animation: cardfront 2s infinite;

   }

   .card-back{

     z-index: 1;

     background:url(images/cardbg.jpg) no-repeat;

     background-size:  100% 100%;

     animation: cardback 2s infinite;

     -webkit-animation: cardback 2s infinite;

   }

   @keyframes cardfront{

     0%{transform: rotateY(0deg);}

     50%{transform: rotateY(180deg);}

     100%{transform: rotateY(0deg);}

   }

   @-webkit-keyframes cardfront{

     0%{-webkit-transform: rotateY(0deg);}

     50%{-webkit-transform: rotateY(180deg);}

     100%{-webkit-transform: rotateY(0deg);}

   }

   @keyframes cardback{

     0%{transform: rotateY(180deg);}

     50%{transform: rotateY(0deg);}

     100%{transform: rotateY(180deg);}

   }

   @-webkit-keyframes cardback{

     0%{-webkit-transform: rotateY(180deg);}

     50%{-webkit-transform: rotateY(0deg);}

     100%{-webkit-transform: rotateY(180deg);}

   }

   .card-light{

     width: 50px;

     margin: 50px;

     box-shadow: 0 0 10px 3px yellow;

     animation: cardlight 0.5s linear infinite;

     -webkit-animation: cardlight 0.5s linear infinite;

   }

   @-webkit-keyframes cardlight{

     0%{box-shadow: 0 0 0px 0px yellow;}

     100%{box-shadow: 0 0 60px 0px yellow;}

   }

   </style>

 </head>

 <body>

   <div class="wrap">

     <div class="cardbg">

       <div class="card-back"></div>

       <img src="data:images/card1.jpg" alt="卡牌" class="card-front">

     </div>

     <img src="data:images/card1.jpg" alt="卡牌" class="card-light">

   </div>

 </body>

css3实现卡牌旋转与物体发光效果的更多相关文章

  1. cocos2d-x 卡牌翻牌效果的实现

    转自:http://blog.csdn.net/yanghuiliu/article/details/9115833 这个能实现翻牌的action就是CCOrbitCamera. static CCO ...

  2. 在WebGL场景中管理多个卡牌对象的实验

    这篇文章讨论如何在基于Babylon.js的WebGL场景中,实现多个简单卡牌类对象的显示.选择.分组.排序,同时建立一套实用的3D场景代码框架.由于作者美工能力有限,所以示例场景视觉效果可能欠佳,本 ...

  3. CCOrbitCamera卡牌翻转效果

    static CCOrbitCamera* create(float t, float radius, float deltaRadius, float angleZ, float deltaAngl ...

  4. Unity3D_(游戏)卡牌04_游戏界面

        启动屏界面.主菜单界面.选关界面.游戏界面 卡牌01_启动屏界面 传送门 卡牌02_主菜单界面 传送门 卡牌03_选关界面 传送门 卡牌04_游戏界面    传送门 选关界面效果 (源代码在文 ...

  5. Unity3D_(游戏)卡牌03_选关界面

      启动屏界面.主菜单界面.选关界面.游戏界面 卡牌01_启动屏界面 传送门 卡牌02_主菜单界面 传送门 卡牌03_选关界面 传送门 卡牌04_游戏界面    传送门 选关界面效果 (鼠标放在不同关 ...

  6. Unity3D_(游戏)卡牌02_主菜单界面

      启动屏界面.主菜单界面.选关界面.游戏界面 卡牌01_启动屏界面 传送门 卡牌02_主菜单界面 传送门 卡牌03_选关界面 传送门 卡牌04_游戏界面    传送门 主菜单界面 (选择左边图标或选 ...

  7. unity 卡牌聚拢算法

    unity 卡牌聚拢算法 前言 代码 前言 笔者在做项目时遇到了一个要聚拢手牌,像三国杀里的手牌聚拢的效果 大概效果图: 代码 public Dictionary<int, int> le ...

  8. BZOJ 4205: 卡牌配对

    4205: 卡牌配对 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 173  Solved: 76[Submit][Status][Discuss] ...

  9. 使用UIKit制作卡牌游戏（三）ios游戏篇

    译者: Lao Jiang | 原文作者: Matthijs Hollemans写于2012/07/13 转自朋友Tommy 的翻译,自己只翻译了这第三篇教程. 原文地址: http://www.ra ...

随机推荐

  1. 9.26 H5日记

    9.26 1.新的背景属性,background-position background-position有两个值,水平和垂直,单位px ❤在html和CSS当中,有三个属性可以向服务器发送请求,分别 ...

  2. ie8,9不支持indexOf解决办法，纯拷贝

    原文在这里,大家快去点啊 自从开始工作后,就没有再碰过原型链了,今天遇到ie8不认识indexOf的时候才发现原型这么嚣张,,哈哈 把代码粘过来,以后留着看 //添加数组IndexOf方法 if (! ...

  3. (转)android权限（permission）大全

    文章转载自:http://blog.csdn.net/hai_qing_xu_kong/article/details/24265533 1.android.permission.WRITE_USER ...

  4. url中含有%

    Server.UrlEncode(“参数”)也可以使用javascript 的编码方式href="页面?name=encodeURI("参数")传送页代码编码 接收页代码 ...

  5. hdu 2289 要二分的杯子

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2289 大意是 一个Cup,圆台形,给你它的顶部圆的半径,底部圆的半径,杯子的高度,和此时里面装的水的体 ...

  6. dpdk中文文档

    Linux平台上DPDK入门指南 1. 简介 1.1. 文档地图 2. 系统要求 2.1. X86 上预先设置 BIOS 2.2. 编译DPDK 2.3. 运行DPDK应用程序 3. 使用源码编译DP ...

  7. linux shell 重定向中的 & 符号

    写一个简单的 demo 示例 #include <stdio.h> int main() { fprintf(stdout, "stdout output\n"); f ...

  8. Intellij idea 系列教程之常用配置项

    Intellij idea 系列教程之常用配置项 Intellij idea 系列教程目录(https://www.cnblogs.com/binarylei/p/10347600.html) Lan ...

  9. String... to 可变参数的使用

    public class testMail { public static void fun(int... x) { for(int i = 0;i < x.length;i++) { Syst ...

  10. 微信小程序bug

    2017-11-21 微信movable-view有bug,它不能在style里面设置z-index,一旦设置了,不是层间的元素就会有干扰,比如我移动0层的movable-view,但是1层的mova ...