<!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. C语言事实上不简单：数组与指针

    之前在写C的时候,没怎么留意数组.就这么定义一个.然后颠来倒去的使用即可了.只是后来碰到了点问题.解决后决定写这么一篇博客,数组离不开指针.索性就放一起好了. 如今我定义了一个数组:int cc[10 ...

  2. [TypeScript] Use TypeScript’s never Type for Exhaustiveness Checking

    TypeScript 2.0 introduced a new primitive type called never, the type of values that never occur. It ...

  3. webpack-输出

    输出(Output) 配置 output 选项可以控制 webpack 如何向硬盘写入编译文件. 注意,即使可以存在多个入口起点,但只指定一个输出配置. 用法(Usage) 在 webpack 中配置 ...

  4. create-react-app 引入 antd 及 解决 antd 样式无法显示的bug

    方案一: npm run eject 暴露所有内建的配置 安装组件库 yarn add antd babel-plugin-import 根目录下新建.roadhogrc文件(别忘了前面的点,这是ro ...

  5. JSP页面怎样导入优酷视频

    我在做的一个项目里面,应客户要求.要导入视频.然后我再考虑,视频是直接放在本地数据库的话,那么肯定会出现数据视频读取反应慢. 那么,就能够把视频先传到优酷上面,然后再直接应用优酷视频上的html代码, ...

  6. iOS 保存视频AVAssetWriter

    错误的CMTime导致保存的视频无效,比如: frameTime CMTime 1122 600ths of a second value CMTimeValue 1122timescale CMTi ...

  7. kernel devel 安装与卸载

    1.查看系统内核 uname -r 2.查看已安装kernel-devel uname -a ; rpm -qa kernel\* | sort 3.下载对应的rpm wget xxx/kernel- ...

  8. [计算机故障]toshiba笔记本计算机无法正常启动,每次均需要按ESC

    同事一台toshiba的笔记本计算机,无法正常启动,每次均需要按ESC才可以正常后续动作. 之后系统可以正常工作. 排查过程: 1.尝试恢复bios到默认配置:不行,而且不小心搞了个蓝屏,还好记得是“ ...

  9. ffmpeg-linux32-v3.3.1

    . imageio-binaries/ffmpeg at master · imageio/imageio-binaries · GitHub https://github.com/imageio/i ...

  10. openstack horizon 学习(1) 总览

    关于Horizon的设计理念: 来自官网(http://docs.openstack.org/developer/horizon/intro.html): Horizon holds several ...