<!DOCTYPE html>

<html>

<head>

    <title>demo</title>

</head>

<body>

    <style type="text/css">

        @-webkit-keyframes rotate{

            from{-webkit-transform:rotateY(0);}

            to{-webkit-transform:rotateY(-360deg);}

        }

        @keyframes rotate{

            from{-webkit-transform:rotateY(0);}

            to{-webkit-transform:rotateY(-360deg);}

        }

        .rect{

            width: 200px;

            height: 200px;

            margin: 0 auto;

            border-radius: 5px;

            border: 1px solid #ccc;

            font-size: 125pt;

            text-align: center;

            line-height: 200px;

            background-color: #bbb;

            opacity: 0.5;

            animation: rotate 8s infinite linear;

            -webkit-animation:rotate 8s infinite linear;

        }

        .rect:hover{

            animation-play-state: paused;

        }

        .stop{

          animation-play-state: paused;

        }

        #control{

          margin: 0 auto;

          text-align: center;

          margin-top: 10px;

        }

    </style>

    <div id="number" class ="rect">6</div>

    <div id="control">

      <button id="run" onclick="frun()">播放</button>

      <button id="pause" onclick="fpause()">暂停</button>

    </div>

    <script type="text/javascript">

    var obj=document.getElementById('number');

      function fpause(){

        if (obj) {

          obj.style.setProperty('animation-play-state',"paused");

          //obj.classList.add('stop');//方法二

        }

      }

      function frun(){

        if (obj) {

          obj.style.setProperty('animation-play-state',"running");

          //obj.classList.remove('stop');//方法二

        }

       }

    </script>

</body>

</html>

效果展示：

CSS动画：旋转卡片效果的更多相关文章

  1. css做旋转相册效果

    css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  2. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  4. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  5. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  6. CSS动画总结与呼吸灯效果

    首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...

  7. UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  8. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  9. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

随机推荐

  1. [bzoj 1005][HNOI 2008]明明的烦恼（prufer数列+排列组合）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1005 分析: 首先prufer数列:http://baike.baidu.com/view/1 ...

  2. jd-eclipse插件的安装

    一,资源 jd-eclipse-site-1.0.0-RC2.zip    百度网盘链接:https://pan.baidu.com/s/1GTFFY_1jg4k9vjZNE4JliQ       提 ...

  3. springmvc 日期转换器

    package com.xxx.common.controller.converter; import org.joda.time.DateTime; import org.joda.time.for ...

  4. css3 字体自适应

    css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width 1vh = 1% ...

  5. POJ 1386 Play on Words（有向欧拉通路 连通图）

    题意  见下方中文翻译 每一个单词能够看成首尾两个字母相连的一条边  然后就是输入m条边  推断是否能构成有向欧拉通路了 有向图存在欧拉通路的充要条件: 1. 有向图的基图连通: 2. 全部点的出度和 ...

  6. ubuntu 建立加密分區及其安全刪除

    加密分區1: sudo apt-get install cryptsetup2: 用“磁盤實用工具“,建立新的分區 或者 格式化現有分區,且勾選“加密底層設備“,按提示設定密碼3:同時選擇加密條件:i ...

  7. android 日历

    [1].[代码] [Java]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  8. Java中的equals()和hashCode()

    概述 在我们使用类集框架(比方使用hashMap.hashSet)的时候,常常会涉及到重写equals()和hashCode()这两个方法. 这两个方法的联系是: 1. 假设两个对象不同,那么他们的h ...

  9. swift 2.0语法 元组

    import UIKit /*: 元祖 * 可以将多个值保存在一起 * 格式: (数值1, 数值2, 数值3) * 特点: 元祖可以保存不同数据类型的值 * 用途: 在C/OC中如果一个函数想返回多个 ...

  10. AUTOTRACE

    .sqlplus 设置参数 set atuotrace on SET AUTOTRACE OFF --No AUTOTRACE report is generated. This is the def ...