效果演示

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. 序列化、模块 day21

      一 序列化 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 字典示例 import json d={'a':1,'b':2} ret = json.dumps(d)# ...

  2. thread库，附带程序介绍

    千万注意线程不要比主线程晚结束,主线程一旦结束,对象将被销毁 std:thread 代表了一个线程对象 this_thread:是一个命名空间,对当前调用者线程进行操作 如果把可调用对象作为参数传递给 ...

  3. TCP Nagle算法&&延迟确认机制

    TCP Nagle算法&&延迟确认机制 收藏 秋风醉了 发表于 3年前 阅读 1367 收藏 0 点赞 0 评论 0 [腾讯云]买域名送云解析+SSL证书+建站!>>> ...

  4. 小明A+B

    /* 小明今年3岁了, 现在他已经能够认识100以内的非负整数, 并且能够进行100以内的非负整数的加法计算. 对于大于等于100的整数, 小明仅保留该数的最后两位进行计算, 如果计算结果大于等于10 ...

  5. iOS.Operation-on-ZipFile

    Operation on ZipFile Reference 在Mac OS X和iOS中操作.zip文件(例如创建zip文件, 从zip文件中抽取数据): 1. http://stackoverfl ...

  6. oracle主键修改&设置某一字段可以为null

    1.oracle主键修改 1.1)首先查看需要修改的表的主键名,默认的情况下,数据库会自动分配 select * from user_cons_columns where table_name='表名 ...

  7. http协议（一）一些基础知识

    当我们在浏览器的地址栏中输入网址,然后点击回车,接着,浏览器就会呈现出我们需要的web界面,那么,这个界面是怎么产生的? web的界面是根据我们输入的URL(网址.地址),浏览器从服务器端获取对应的文 ...

  8. nginx自旋锁

    #include <stdio.h> #include <stdint.h> #include <unistd.h> /* typedef unsigned lon ...

  9. 2018.11.14 uoj#34. 多项式乘法（ntt）

    传送门 今天学习nttnttntt. 其实递归方法和fftfftfft是完全相同的. 只不过fftfftfft的单位根用的是复数中的东西,而nttnttntt用的是数论里面有相同性质的原根. 代码: ...

  10. Tomcat架构解析(一)-----Tomcat总体架构

    Tomcat是非常常用的应用服务器,了解Tomcat的总体架构以及实现细节,对于理解整个java web也是有非常大的帮助. 一.Server   1.最简单的服务器结构 最简单的服务器结构如图所示: ...