注意 @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. 前端学PHP之文件操作(认真读读)

    前面的话 在程序运行时,程序本身和数据一般都存在内存中,当程序运行结束后,存放在内存中的数据被释放.如果需要长期保存程序运行所需的原始数据,或程序运行产生的结果,就需要把数据存储在文件或数据库.一般地 ...

  2. Maven的简单使用，HelloWorld

    安装好Maven后就用一个简单的HelloWorld程序来测试一下,体验一下Maven.至于不懂的地方,请查看<Maven实战>书籍. 书籍网址:http://download.csdn. ...

  3. iOS实现简书的账号识别方式(正则表达式)

    通过简书iOS客户端登录,我们会看到请输入手机号或者邮箱登录,但是我们随机输入1234567的时候,便会弹出手机格式不正确,同样也会识别我们的邮箱格式,那么我们在项目中怎么实现这种判断呢? 0E471 ...

  4. Trie + DP LA 3942 Remember the Word

    题目传送门 题意:(训练指南P209) 问长字符串S能由短单词组成的方案数有多少个 分析:书上的做法.递推法,从后往前,保存后缀S[i, len-1]的方案数,那么dp[i] = sum (dp[i+ ...

  5. MFC 打开文件夹选择框并获取文件夹路径

    CString FicowGetDirectory() { BROWSEINFO bi; char name[MAX_PATH]; ZeroMemory(&bi, sizeof(BROWSEI ...

  6. 疯狂java学习笔记之面向对象(六) - 构造器重载、方法重载和方法重写

    一.方法重载(Overload): Java允许同一个类中定义多个同名方法,只要形参不一样就可以,如果同一个类中包含了两个或两个以上方法名相同的方法,但形参列表不同,则被成为方法重载(两同一异). 同 ...

  7. Android MuPDF 阅读PDF文件

    MuPDF是一款轻量级的开源软件,可以用来阅读PDF文件.下载完源代码以后,想要运行成功,除了Android SDK之外,还需要Android NDK环境,因此有点麻烦. 但是一旦安装完必须的环境以后 ...

  8. require.js 入门学习 （share）

    以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...

  9. Linq to Entities下存储过程的使用方法

    1.首先在数据库中创建好存储过程. 2.在实体模型中添加存储过程的映射.此时根据映射过来的查询结果有两种途径:第一种可以选择添加选择的存储过程的函数到实体模型中.这样的话,查询的结果将会是xxx_re ...

  10. BZOJ4499: 线性函数

    Description 小C最近在学习线性函数,线性函数可以表示为:f(x) = kx + b.现在小C面前有n个线性函数fi(x)=kix+bi ,他对这n个线性函数执行m次操作,每次可以: 1.M ...