<!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. 夜话JAVA设计模式之策略模式

    策略模式     定义了算法簇,分别封装起来,让他们之间可以互相替换,让算法簇的变化独立于使用算法的客户.设计原则1     找出应用中可能需要变化之处,把他们独立出来,不要和那些不需要变化的代码混在 ...

  2. [bzoj2657][Zjoi2012]旅游 journey_ 对偶图_树形dp

    旅游 bzoj-2657 Zjoi-2012 题目大意:题目链接 注释:$1\le K\le 2\cdot 10^5$. 想法:这题... 感觉和上一个题的提示有些类似,就是题目生怕你不知道这是一道对 ...

  3. doT js模板入门 3

    for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...

  4. docker run和nsenter

    docker run和nsenter 1,本机运行java -version没有内容, 使用 docker run java java -version就有内容了: 2, docker run -d ...

  5. Handling bundles in activities and fragments

     Bundle is a useful data holder, which maps String values to various Parcelable types. So basicall ...

  6. Apache配置基于域名的虚拟主机

    一.设定 模拟域名  www.wang.org.blog.wang.org.bbs.wang.org 网站文件夹 /var/html/www./var/html/blog./var/html/bbs ...

  7. Google2015校招在线測试题1----扫雷最少点击次数

    Problem Minesweeper is a computer game that became popular in the 1980s, and is still included in so ...

  8. iOS-UITextView-文本输入视图的使用

    #import "ViewController.h" @interface ViewController ()<UITextViewDelegate> { UIView ...

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

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

  10. CSS垂直居中完美有用实例

    <!DOCTYPE HTML>           <html>            <head>             <meta meta chars ...