<!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. 005 EIGRP

    Router>en Router#config t Enter configuration commands, one per line.  End with CNTL/Z. Router(co ...

  2. Cocos2d-x旧引擎文件夹结构

    转自:http://blog.csdn.net/lwuit/article/details/7870395 Cocos2d-x的文件夹结构例如以下: 文件夹的详细结构介绍例如以下: Box2D:物理引 ...

  3. cocos2d-x+lua开发模式下编辑器的选择

    原本打算直接用CocosIDE的,毕竟是官方出品,并且支持Android远程调试,windows下的调试也非常方便,调试的信息也非常全,智能提示也不错.好了,一切看上去非常完美,可是它有一个致命缺陷, ...

  4. java web中的session属性范围和request属性范围

    首先必需要了解client跳转和server端跳转的差别: client跳转: response.sendRedict(String path).地址栏发生改变. 不能传递request属性. ser ...

  5. a non-linear editing software

    VLMC, open source video editor - VideoLAN http://www.videolan.org/vlmc/

  6. XMU 1040 Schedule 【拓扑排序】

    1040: Schedule Time Limit: 500 MS  Memory Limit: 64 MBSubmit: 12  Solved: 2[Submit][Status][Web Boar ...

  7. uclibc,eglibc,glibc之间的区别和联系【转】

    本文转载自:https://www.crifan.com/relation_between_uclibc_glibc_eglibc/ [glibc,uclibc,eglibc的简介] 1.Glibc ...

  8. 2.6 wpf标记扩展

    1.什么是标记扩展?为什么要有标记扩展? 标记扩展是扩展xmal的表达能力 为了克服现存的类型转换机制存在的 常用的标记扩展有如下: x:Array 代表一个.net数组,它的子元素都是数组元素.它必 ...

  9. HTTPS数据包抓取的可行性分析

    HTTPS数据包抓取的可行性分析 相信只要是从事软件开发, 多多少少都会涉及到数据包的抓取.常见的有网页数据抓取(即网页爬虫),应用程序数据包抓取等.网页数据抓取比较简单, 在chrome下可以非常方 ...

  10. sql时间截取与修改

    --修改日,从1号修改到10号UPDATE CHECKINOUT SET CHECKTIME=DATEADD(DAY,9,CHECKTIME) WHERE YEAR(CHECKTIME)=1970 a ...