<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        /*定义动画*/

        @keyframes zd{

        /*关键帧     自定义的动画名称*/

            /*从*/

            0%{

                transform: rotate(0deg);

            }

            10%{

                transform: rotate(70deg);

            }

            /*到*/

            100%{

                transform: rotate(360deg);

            }

        }

            .a{

                height: 200px;

                width: 200px;

                border-style: solid;

                border-width: 20px;

                border-color: red yellow green blue;

                border-radius: 50%;

                /*transition: 2s;*/

            }

            .a:hover{

                /*transform: rotate(360deg);*/

                animation: zd 1s infinite linear;

            /*动画 动画名称   动画执行一次所需时间  执行次数 匀速*/

            }

        </style>

    </head>

    <body>

        <div class="a"></div>

    </body>

</html>

源码禁止盗用!转载请注明出处!!!

呼啦圈（keyframes和transform结合）的更多相关文章

  1. drf呼啦圈

    呼啦圈 1.1 表结构设计 不会经常变化的值放在内存:choices形式,避免跨表性能低. 分表:如果表中列太多/大量内容可以选择水平分表 表自关联 from django.db import mod ...

  2. css3 @keyframes、transform详解与实例

    一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...

  3. css3动画2（transform用法）

    1.直接写在样式里,比如一个小箭头,transform:rotate(135deg)即可 2.写动画过程,@keyframes和transform和animation组合起来用 写在@keyframe ...

  4. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. CSS3 @keyframes 规则以及animation介绍和各种动画样式说明

    一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...

  6. transform动画的一个3D的正方体盒子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css3中的变形（transform）、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  8. [React] Animate your user interface in React with styled-components and "keyframes"

    In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyfra ...

  9. [Angular2 Animation] Use Keyframes for Fine-Tuned Angular 2 Animations

    When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define a ...

随机推荐

  1. 域名添加HTTPS

    准备 需要python版本为2.7以上,所以centos6需要把2.6升级成2.7 升级python ###安装python2.7 tar -xvf Python-2.7.5tar.bz2 cd Py ...

  2. CentOS command

    管理centos服务器的时候常会对文件进行一些常规操作,除了ftp之外了解在ssh下必要的文件操作命令那也是必不可少的,以下摘录一些常用的文件操作命令: 文件操作: ls ####查看目录中的文件## ...

  3. web前端减少你按刷新的频率

    Browsersync 先下载:nodejs  ,然后安装完以后,我们在命令行打印 node -v 完成后我们进行以下操作,安装browser-sync ,官网上有详细的教程,请访问:Browsers ...

  4. VS2012 ASP.NET 母版页的创建与使用

    在做牛腩新闻公布系统的过程中,须要使用ASP.NET的母版页来抽出全部网页的公共部分,以便更好的复用自己的网页布局和设计. 首先我们来看怎样创建一个新的母版页,例如以下图所看到的: 加入之后,例如以下 ...

  5. Android 布局自适应屏幕

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenFzNjI3NjExMzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. Android自己定义组件系列【5】——进阶实践（2）

    上一篇<Android自己定义组件系列[5]--进阶实践(1)>中对任老师的<可下拉的PinnedHeaderExpandableListView的实现>前一部分进行了实现,这 ...

  7. IE7下兼容问题总结

    1.<LI> border-bottom 不显示 解决办法 加个height:100%; 2.border:none;不好使,要用 border:0;

  8. POJ 3100:Root of the Problem

    Root of the Problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12060   Accepted: 6 ...

  9. oracle type类型

    转载 http://blog.sina.com.cn/s/blog_6cfb6b090100ve92.html 转自网络,具体用法我会再细化 1．概念    方法:是在对象类型说明中用关键字  MEM ...

  10. 如何在Mac OS X 中运行Lua (Running Lua on Mac OS X)

    参考文章:1) http://www.oschina.net/question/12_769552) http://rudamoura.com/luaonmacosx.html 最近在为iOS开发游戏 ...