<!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. Python学习系列之format用法

    format是代替%s格式的方法 不需要理会数据类型的问题,在%s方法中的%s只能代替字符串类型 填充方式十分灵活,对其方式十分强大 format填充字符串 通过位置来填充字符串 #format会把参 ...

  2. 查看yarn当前执行任务列表

    Author: kwu 查看yarn当前执行任务列表.可使用例如以下命令查看: yarn application -list 如需杀死当前某个作业,使用kill application-id的命令例如 ...

  3. Postgis经常使用函数

    1,基本操作函数 AddGeometryColumn(<schema_name>, <table_name>,<column_name>, <srid> ...

  4. Wps 2013 拼音标注两种方式分析

    Wps 2013 拼音标注两种方式分析 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转 ...

  5. 后台进程管理工具---supervisor

    supervisor是一个linux下的进程管理工具,有时须要开发一些后台服务类的程序.这类程序通常不能由于意外挂掉.所以最好能在出现意外挂掉的情况下可以重新启动,继续服务. 之前我一直採用创建dae ...

  6. http ssl

    http ssl

  7. HTTP要点概述：六，HTTP报文

    一,HTTP报文: 用于HTTP交互的信息称为HTTP报文.请求端(客户端)的HTTP报文叫做请求报文,响应端(服务器)的叫做响应报文.HTTP报文本身是由多行(用CR+LF换行)数据构成的字符串文本 ...

  8. SpringMVC_2

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...

  9. JLabel作为展现元素时需要注意的事项

    如果没有内容,JLabel默认透明就无法作为点击区域了,所以为了让其可以响应鼠标事件需要设置 setOpaque(true) 这样就可以响应鼠标事件了 (吐槽一下,多年以前在大学做个web地图导航的网 ...

  10. YTU 2503: 大斐波那契数列

    2503: 大斐波那契数列 时间限制: 1 Sec  内存限制: 200 MB 提交: 974  解决: 400 题目描述 斐波那契数列,又称黄金比例数列,指的是这样一个数列:0.1.1.2.3.5. ...