注意 @keyframes to/from 的学习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<style>

    /* 顺时针自转 */

    @keyframes spin {

        to {

            transform: rotate(1turn);

        }

    }

     /* 逆时针自转 */

    @keyframes spin-reverse {

        from {

            transform: rotate(1turn);

        }

    }

    /* 这是一坨自暴自弃的样式 */

    .basic{

        border:3px solid orange;

        height: 150px;

        width:150px;

        border-radius:50%;

        margin:50px;

    }

    /*

        顺时针自转，同时该元素下所有的子元素也会一起旋转起来

    */

    .avatar{

        /*

            linear : 从头到尾速度是相同的;

            infinite：无限轮播

         */

        animation: spin 10s infinite linear;  

    }

    /*

        逆时针旋转“自转”，与“公转”导致的旋转相抵消。形成一种不动的错觉

    */

    .avatar > img {

        animation:spin-reverse 10s infinite linear;

    }

</style>

<div class="basic avatar">

    <img src="github.png" alt="">

</div>

</body>

</html>

css3 animation 实现环形路径平移动画的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. 制作动画效果：《CSS3 Animation》

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  4. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  5. CSS3 animation（动画） 属性

    一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...

  6. css3 svg路径蒙版动画

    css3 svg路径蒙版动画 具体看https://www.cnblogs.com/oubenruing/p/9568954.html 还有个更好控制的写法<pre><!DOCTYP ...

  7. css3 svg 物体跟随路径动画教程

    css3 svg 物体跟随路径动画教程https://www.jianshu.com/p/992488f3f3fc

  8. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  9. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

随机推荐

  1. Android 在地图上画矩形

    point1=map.toMapPoint(400,426); point2=map.toMapPoint(600,640); initextext = new Envelope(point1.get ...

  2. java 汽车销售收入系统

     >>>>>>>>>>>>>>>>>>>> 语言:java 工具:eclipse ...

  3. 分数try catch

    要求:编写一个程序,此程序在运行时要求用户输入一个 整数,代表某门课的考试成绩,程序接着给出“不及格”.“及格”.“中”.“良”.“优”的结论.要求程序必须具备足够的健壮性,不管用户输入什 么样的内容 ...

  4. js中各种宽高

    各种宽高 Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY ...

  5. ural 1343. Fairy Tale

    1343. Fairy Tale Time limit: 1.0 secondMemory limit: 64 MB 12 months to sing and dance in a ring the ...

  6. [linux]unixODBC的安装配置说明

    什么是unixODBC: ODBC(Open Database Connect)是由Microsoft 公司于1991 年提出的一个开放的,用于访问数据库的统一接口规范. unixODBC的是为非Wi ...

  7. ACM 汉诺塔（三）

    汉诺塔(三) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度 ...

  8. Codeforces Round #228 (Div. 2) B. Fox and Cross

    #include <iostream> #include <string> #include <vector> #include <algorithm> ...

  9. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  10. UVA 11609 - Teams(二项式系数)

    题目链接 想了一会,应该是跟二项式系数有关系,无奈自己推的式子,构不成二项式的系数. 选1个人Cn1*1,选2个人Cn2*2....这样一搞,以为还要消项什么的... 搜了一下题解,先选队长Cn1,选 ...