效果演示

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. Oracle_PL/SQL(4) 过程和函数

    create table s_sc ( SNAME VARCHAR2(20) primary key, c_grade NUMBER(6), m_grade NUMBER(6), e_grade NU ...

  2. Eclipse中logcat过滤器的使用

    logcat里信息繁多,用过滤器可以方便快捷的找到我们要查找的信息. 我们可以在打开Eclipse之后,选择Window –> Show View ->Other菜单,然后在Android ...

  3. php 多进程

    php 在使用场景中一般是处理web应用,所以多进程使用不适合在web中使用,且php-fpm中pcntl_fork不能使用,所以使用场景是在cgi模式下 一个进程调用pcntl_fork函数后,系统 ...

  4. 2019年学Java开发有优势吗？

    随着信息科技的发展,在我们的日程生活和工作中到处充斥和使用着互联网信息技术.事实说明,互联网已经越来越广泛地深入到人们生活的方方面面,Java技术服务市场需求空缺会越来越大.学会一门IT技术,将拥有更 ...

  5. GTK图形控件中的rc文件使用心得

    转载自: 1.http://blog.csdn.net/saintwinona/article/details/6972754 2. (1).GTK 主题指南 1.Widgets         GT ...

  6. HDOJ4734 F(x)

    原题链接 数位\(DP\),继续套记搜模板 定义\(f[pos][now]\),\(pos\)是枚举到的位数,\(now\)是\(A\)的权值减去当前枚举的数的权值,即剩余权值大小. 然后就是记搜模板 ...

  7. CH#56C 异象石

    一道LCA 原题链接 先跑一边\(dfs\),求出每个节点的时间戳,如果我们将有异象石的节点按时间戳从小到大的顺序排列,累加相邻两节点之间的距离(首尾相邻),会发现总和就是答案的两倍. 于是我们只需要 ...

  8. python面向对象的三大特征

    1.封装: 封装就是对类和对象的成员访问进行限制,设定可以访问的方式和不可以访问的方式. 分类: 私有化的封装:当前类/对象种可以使用,类/对象外和子类/对象都不可以用 受保护的封装:当前类/对象和子 ...

  9. 进化树（phylogenetic trees）

    构建进化树的工具有: muscle mega 进化树的可视化: 本地可视化软件 Figtree (网址:http://tree.bio.ed.ac.uk/software/figtree/) 该软件是 ...

  10. Writing modular applications with laravel-modules

    01-07-2016 Let me start by saying Laravel is an amazing framework. However when it comes to writing ...