效果演示

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. MyEclipse中抽取接口、父类

    选中要抽取接口的类-------->Refactor-------->Extact Interface-------->填写抽取的接口名-------->选择要抽取的方法(一般 ...

  2. python 三元表达式、列表推导式、生成器表达式、递归、匿名函数、内置函数

    http://www.cnblogs.com/linhaifeng/articles/7580830.html 三元表达式.列表推导式.生成器表达式.递归.匿名函数.内置函数

  3. python 3.6.5 sys模块和os模块

    1 sys.argv 命令行参数List,第一个元素是程序本身路径 2 sys.exit(n) 退出程序,正常退出时exit(0) 3 sys.version 获取Python解释程序的版本信息 4 ...

  4. windows2003服务器，时间每隔1小时自动同步一次

    有台服务器的时间总是不对,可能是电池快没电了吧,于是想让它时间保持更新状态,但又不想用第三方软件,在百度上查了一下,还真有方法 HKEY_LOCAL_MACHINE->SYSTEM->Cu ...

  5. HDU_2136

    #include <iostream> #include <stdio.h> #include <math.h> #include <algorithm> ...

  6. Linux使用touch批量修改文件/文件夹时间戳

      Linux下touch是一个非常有用的命令. touch语法结构如下: touch [-acfm][-d <日期时间>][-r <参考文件或目录>][-t <日期时间 ...

  7. java 环境搭建

    一.安装jdk 下载jdk http://www.oracle.com/technetwork/java/javase/downloads 将下载的jdk文件放到 /opt 下解压 $sudo cp ...

  8. zz Alex's BLOG 串口连接

    using System; using System.Collections.Generic;using System.ComponentModel;using System.Data;using S ...

  9. 虚函数与bind 实现设计模式的练习

    相同模式使用虚函数与bind function进行实现对比 #include "stdafx.h" #include <iostream> #include <f ...

  10. Ionic学习

    1. 原来Http不能直接加在普通类里,下面的报错 import { Component } from '@angular/core'; import { NavController } from ' ...