注意 @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. 【转】Kylin实践之使用Hive视图

    http://blog.csdn.net/yu616568/article/details/50548967 为什么需要使用视图 Kylin在使用的过程中使用hive作为cube的输入,但是有些情况下 ...

  2. Liferay 6.2 改造系列之二十四：修改liferay密码的加密方式

    为了便于后期与Cas集成过程中使用数据库用户的方便,将liferay密码的加密方式改为SHA. 在/portal-master/portal-impl/src/portal.properties配置文 ...

  3. item上下自动循环滚动显示

    //li 上下滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; va ...

  4. R AnalyticFlow---R的流程图

    0.简介 R AnalyticFlow是一款利用R环境作为统计计算的数据分析软件,创作者是日本人,版权属于日本Ef-prime公司.R AnalyticFlow除了拥有直观的用户界面和流程图显示,它还 ...

  5. datatables笔记

    刷新 http://datatables.net/reference/api/ajax.reload()

  6. BZOJ1946 : [Ceoi2006]ANTENNA

    首先通过随机增量法求出最小覆盖圆,作为答案的上界. 然后二分答案,检验的时候枚举每个点作为原点,求出其他每个点被包括在圆内的角度区间,然后扫描线即可. 时间复杂度$O(Tn^2\log n)$. #i ...

  7. Storm和JStorm(阿里的流处理框架)

    本文导读: 1.What——JStorm是什么? 1.1 概述 .2优点 .3应用场景 .4JStorm架构 2.Why——为什么启动JStorm项目?(与storm的区别) .1storm的现状.缺 ...

  8. Node.js 手册查询-5-Ejs 方法

    express 中使用 //设置模板目录 app.set('views', path.join(__dirname, 'views')); //设置模板引擎 app.set('view engine' ...

  9. viewpager 与 radiogroup 联动时的位置问题

    public void onPageSelected(int position) {} 方法中得到radiobutton时,最好通过(RadioButton) this.radioGroup.find ...

  10. 神奇的莫比乌斯带(mobius)

    1.禅师和青年之间的对话 2.制作一个莫比乌斯带 3.神奇的莫比乌斯带 4.对莫比乌斯带进行简单的数学建模 1.禅师和青年之间的对话 青年问禅师:“大师,我很爱我的女朋友,她也有很多优点,但是总有几个 ...