<!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. [codevs 2488]绿豆蛙的归宿（拓扑排序）

    题目:http://dev.codevs.cn/problem/2488/ 分析:这题有个特殊的地方,就是每个边都有可能走到,所以就是每个边的权值*每个边的概率,所以只要求概率,拓扑一下就可以了.

  2. 23、Java并发性和多线程-重入锁死

    以下内容转自http://ifeve.com/reentrance-lockout/: 重入锁死与死锁和嵌套管程锁死非常相似.锁和读写锁两篇文章中都有涉及到重入锁死的问题. 当一个线程重新获取锁,读写 ...

  3. python_swift_project_swift使用

    1. swift的存取用curl命令. 我们先把pub url 和token保存起来 root@A071103070098:~# export pubURL=http://10.194.148.102 ...

  4. ios測试的时候出现错误

    dyld: Library not loaded: @rpath/XCTest.framework/XCTest   Referenced from: /Users/zhumin/Library/De ...

  5. LeetCode 160. Intersection of Two Linked Lists （两个链表的交点）

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  6. 从2月14号開始，上传AppStore会碰到：Failed to locate or generate matching signing assets

    从2月14号開始,上传AppStore时可能会碰到这个问题: Failed to locate or generate matching signing assets Xcode attempted ...

  7. HDU2082 找单词 【母函数】

    找单词 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  8. Polymorphism (C# Programming Guide)

    https://msdn.microsoft.com/en-us/library/ms173152.aspx Polymorphism is often referred to as the thir ...

  9. 使用GitHub（转载）

    转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137628548491 ...

  10. Linux进程状态解析

    引言 Linux是一个多用户,多任务的系统,可以同时运行多个用户的多个程序,就必然会产生很多的进程,而每个进程会有不同的状态.  在下文将对进程的R.S.D.T.Z.X 六种状态做个说明. PROCE ...