<!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(3) 1051: [HAOI2006]受欢迎的牛

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 7365  Solved: 3937[Submit][Sta ...

  2. apache2 ubuntu18.04 配置虚拟端口

    修改3个文件/etc/apache2/apache2.conf/etc/apache2/ports.conf/etc/apache2/sites-available/000-default.conf ...

  3. Android: 长按及松开处理

    长按及松开处理 // 长按触发handle final Handler handler = new Handler(); final Runnable mLongPressed = new Runna ...

  4. 好纠结啊，JEECG 商业版本号和开源版本号有什么差别呢？

    好纠结啊.JEECG 商业版本号和开源版本号有什么差别呢? 2014-12-18 jeecg JEECG tp=webp" style="width: 698px;" a ...

  5. CocoaPods pod instal慢、卡住解决方法

    CocoaPods pod install慢.卡住解决方法 近期使用CocoaPods来加入第三方类库,不管是运行pod install还是pod update都卡在了Analyzing depend ...

  6. STM32跑马灯

    #include "stm32f10x.h" #include "led.h" #include "delay.h" #include &q ...

  7. 基于TCP/UDP的socket编程

    基于TCP(面向连接)的socket编程服务器端顺序: 1. 创建套接字(socket) 2. 将套接字绑定到一个本地地址和端口上(bind) 3. 将套接字设为监听模式,准备接收客户请求(liste ...

  8. 大写金额换算器iOS版源码

    大写金额换算器iOS版源码 人民币金额大写转换器输入数字就可以转换成相应的人民币大写金额,操作很easy,需一键点击,就可以复制. 是財务办公人员必备的小工具. 银行.单位和个人填写的各种票据和结算凭 ...

  9. CDOJ 1330 柱爷与远古法阵（高斯消元）

    CDOJ 1330 柱爷与远古法阵(高斯消元) 柱爷与远古法阵 Time Limit: 125/125MS (Java/Others)     Memory Limit: 240000/240000K ...

  10. bzoj 1022 小约翰的游戏John

    题目大意: n堆石子,两个人轮流取石子,每个人取的时候,可以随意选择一堆石子 在这堆石子中取走任意多的石子,但不能一粒石子也不取,取到最后一粒石子的人算输 思路: 首先当每堆石子数都为1时,偶数为先手 ...