注意 @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. An easy problem

    An easy problem Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Sub ...

  2. CSS3 calc()的使用

    前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...

  3. node.js整理 06异步编程

    回调 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了 function heavyCompute(n, callback) { var count = 0, i, j; for (i = ...

  4. DOM系列---基础篇

    DOM系列---基础篇   DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树, ...

  5. js-高级技术

    高级技术: 1.function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new ...

  6. 并查集(路径更新) LA 3027 Corporative Network

    题目传送门 题意:训练指南P192 分析:主要就是一个在路径压缩的过程中,更新点i到根的距离 #include <bits/stdc++.h> using namespace std; c ...

  7. iOS 为类添加Xib里面配置的view

    创建Empty文件,最好与其Controller同名, 在File's Owner的类属性里面指明其所属类(或者说它是个什么Controller), 从File's Owner右键拖向内部创建的视图( ...

  8. hive0.12 rcfile gzip 测试

    创建test_rc; 让后从老数据中插入test_rc中, select test_rc 中插入的数据,报如下错误: Failed with exception java.io.IOException ...

  9. 洛谷 P1449 后缀表达式 Label:表达式计算系列

    题目描述 所谓后缀表达式是指这样的一个表达式:式中不再引用括号,运算符号放在两个运算对象之后,所有计算按运算符号出现的顺序,严格地由左而右新进行(不用考虑运算符的优先级). 如:3*(5–2)+7对应 ...

  10. [知识点]C++中的运算符

    1.前言 之前最开始学习语法和基础知识的时候,基本上最简单的运算符有所接触,当时对于位运算这种东西完全没有概念.今天对C++中出现的部分运算符尤其是位运算符进行一些总结. 2.+ - * / % 这些 ...