<!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. Codeforces Goodbye2016

    A =w= B 0.0 C 题意:按顺序给出一个人一年参加cf比赛的信息,包括是div1还是div2,赛后rating的增减多少,求出这个人现在rating最多可能为多少 分析:模拟 设这个人刚开始分 ...

  2. 运行系统命令而且将输出写到指定日志文件的shell脚本(2)

    上一篇是个简单的能够运行而且写入日志的脚本,可是假设放到生产环境上就显得太粗糙了,所以须要进一步的优化: #! /bin/bash if [ -d "/opt/bmc" ] ; t ...

  3. 改动wordpress默认发邮件邮箱地址

    方法一: wordpress发送邮件默认是用的php mail函数.所以发送邮件的地址是能够随意写的.其默认发邮件的地址是wordpress@yourdomain.com.当然这个地址是能够改动的. ...

  4. 面向对象设计:共性VS个性-------继承的粒度和聚合的粒度以及类的重构

    共性和个性 依据面向对象的原理.类是对象的抽象.也就是说.类是一系列的既有共性又有个性的对象的高度概括,类的属性和方法代表了隶属于该类的全部对象的共性,类的每一个对象实例都能够有不同的属性值,这反映了 ...

  5. Android面试题1

    1.Android中intent的是? 答:实现界面间的切换,能够包括动作和动作数据.连接四大组件的纽带. 2.SAX解析xml文件的长处的是? 答:不用事先调入整个文档,占用资源少 3.在andro ...

  6. leetcode第一刷_Spiral Matrix

    我认为这个题好无聊啊,好端端一个数组.干嘛要跟比巴卜一样转一圈输出呢. . 思想非常easy,每次从左到右.再从上到下,在从右到左,再从下到上.问题是每次到什么时候该改变方向.我的做法是用一个变量保存 ...

  7. Android时间轴效果，直接使用在你的项目中

    近期开发app搞到历史查询,受腾讯qq的启示,搞一个具有时间轴效果的ui,看上去还能够,然后立即想到分享给小伙伴,,大家一起来看看,先上效果图吧 watermark/2/text/aHR0cDovL2 ...

  8. 基于二叉搜索树的符号表和BST排序

    原代码例如以下: #include <stdlib.h> #include <stdio.h> //#define Key int typedef int Key; struc ...

  9. C++链表冒泡，归并，插入排序（纯指针）

    #include <iostream> using namespace std; //别问我为什么要写链表的冒泡排序. struct Node { int data; Node *next ...

  10. Java 并发编程（二）对象的公布逸出和线程封闭

    对象的公布与逸出 "公布(Publish)"一个对象是指使对象可以在当前作用域之外的代码中使用.可以通过 公有静态变量.非私有方法.构造方法内隐含引用 三种方式. 假设对象构造完毕 ...