注意 @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. 【转】saiku与kylin整合备忘录

    http://blog.csdn.net/freefishly/article/details/51759133 为什么要整合? Kylin是通过离线预计算将Hive中事实表的各组合维度的值存储在Hb ...

  2. hdu 1573 X问题 不互质的中国剩余定理

    X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  3. CentOS升级Python 2.6到2.7

    查看python的版本 python -V Python 2.6.6 下载Python   Python-2.7.8.tar.xz      链接:http://pan.baidu.com/s/1i4 ...

  4. 分享Kali Linux 2016.2第42周镜像文件

    分享Kali Linux 2016.2第42周镜像文件Kali Linux官方在10月16日发布Kali Linux 2016.2的第42周镜像文件.这一次不再像上几次,推迟提供32位镜像文件,而是同 ...

  5. DZY Loves Sequences

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  6. Android获取APK包名的几种方法

    Android获取APK包名的几种方法:1.adb shell pm list package -f | findstr 关键字 #只能获取到包名,主Activity名无法获取到 2.使用aapt-- ...

  7. Codeforces 627A XOR Equation（思路）

    题目大概说两个正整数a.b,已知s=a+b以及x=a xor b的值,问有几种a.b这样的数对. 我知道异或相当于无进位的加法,s-x就是其各个位置的进位,比如s-x=1010,那就表示a和b的第1位 ...

  8. linux安装SVN

    1. 下载软件包 http://archive.apache.org/dist/subversion/ http://archive.apache.org/dist/subversion/subver ...

  9. 微软曝光眼球追踪新专利，未来或将可以使用眼球控制HoloLens

    想要在增强现实(AR)和虚拟现实(VR)中获得感官能力,计算机的配合非常重要.如何能够更好的追踪我们所感知的,计算机判断用户目光所向的能力就必须进一步提高.根据微软新曝光的专利,可能已经有一个解决方案 ...

  10. 使用CSS3的appearance属性改变元素的外观

    昨天在和同事一起完成项目的时候,我使用了appearance来渲染select,但是在firefox下出现问题,不完美,最后去除了.但还是要学习下这个属性.大家都知道每个浏览器对HTML元素渲染都不一 ...