CSS 实现加载动画之五-光盘旋转

今天做的这个动画叫光盘旋转,名字自己取的。动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画。做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来。这个动画的实现也很简单,关键点在于如何将元素拼凑成风车形状。然后定义动画的关键帧为rotate 360度,应用于整个元素上,就可以使整个元素旋转起来。案例在请在chrome中查看。

 

1. 先看截图

 

2. 代码实现思路

2.1 首先还是定义四个元素,元素的中心为这四个元素组成的圆的圆心。这样定义的目的可以保证元素拼凑成一个正圆。

2.2 在单个元素的头尾各定义一个子元素,子元素旋转一定的角度,使其平行排列,中间刚好留一个正圆的位置。这里用了rotate和translate属性,没有用skew属性,是因为skew方法会使元素拉伸后变小。

2.3 将每个元素的子元素都定义不同的背景色,定义完成后,会形成8个不同的颜色排列,此时元素的形状已经产生了。需要注意的是,最后一个元素需要裁剪下,因为有可能会覆盖第一个元素。案例中第4,8个子元素是分开写的。

2.4 此时在圆心位置定义一个圆,圆的大小刚好覆盖中间的空隙位置。外层容器也设为一个圆,大小为能全部显示所有的背景颜色,多余的部分截断隐藏。

2.5 定义动画,并在外层容器上应用这个动画。这个动画的方式比较简单,就是旋转,直接使用rotate即可。

 

3. 源代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
 5 <title>CSS3实现加载的动画效果5</title>
 6 <meta name="author" content="rainna" />
 7 <meta name="keywords" content="rainna's css lib" />
 8 <meta name="description" content="CSS3" />
 9 <style>
10 *{margin:0;padding:0;}
11 body{background:#464646;}
12 
13 .m-load{width:490px;height:330px;margin:100px auto;background:url('load.png') center center no-repeat;}
14 
15 /** 加载动画的静态样式 **/
16 .m-load2{position:relative;width:52px;height:52px;margin:0 auto;border-radius:52px;border:2px solid #fff;overflow:hidden;}
17 .m-load2 .item{position:absolute;left:50%;top:0;width:20px;height:100%;margin-left:-10px;}
18 .m-load2 .item:nth-child(2){-webkit-transform:rotate(45deg);}
19 .m-load2 .item:nth-child(3){-webkit-transform:rotate(90deg);}
20 .m-load2 .item:nth-child(4){-webkit-transform:rotate(135deg);clip:rect(-26px,18px,26px,-18px);}
21 .m-load2 .item:nth-child(5){-webkit-transform:rotate(135deg);clip:rect(26px,37px,78px,2px);}
22 .m-load2 .item:before,.m-load2 .item:after{content:'';position:absolute;left:0;width:18px;height:100%;}
23 .m-load2 .item:before{bottom:52%;border-left:2px solid #fff;-webkit-transform-origin:left bottom;-webkit-transform:translate(100%,0) rotate(-45deg);}
24 .m-load2 .item:after{top:52%;border-right:2px solid #fff;-webkit-transform-origin:right top;-webkit-transform:translate(-100%,0) rotate(-45deg);}
25 .m-load2 .item:nth-child(1):before{background:#48ec53;}
26 .m-load2 .item:nth-child(1):after{background:#f75e5a;}
27 .m-load2 .item:nth-child(2):before{background:#a6ea4b;}
28 .m-load2 .item:nth-child(2):after{background:#724dee;}
29 .m-load2 .item:nth-child(3):before{background:#e8d84b;}
30 .m-load2 .item:nth-child(3):after{background:#44abec;}
31 .m-load2 .item:nth-child(4):before{background:#fdc103;}
32 .m-load2 .item:nth-child(5):after{background:#51ddeb;}
33 
34 .m-load2 .point{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:18px;background:#464646;}
35 
36 /** 加载动画 **/
37 @-webkit-keyframes load{
38     100%{-webkit-transform:rotate(360deg);}
39 }
40 .m-load2{-webkit-animation:load 1.8s linear infinite;}
41 </style>
42 </head>
43 
44 <body>
45 <div class="m-load"></div>
46 
47 <div class="m-load2">
48     <div class="item"></div>
49     <div class="item"></div>
50     <div class="item"></div>
51     <div class="item"></div>
52     <div class="item"></div>
53     <div class="point"></div>
54 </div>
55 </body>
56 </html>

 

转载于:https://www.cnblogs.com/zourong/p/3998485.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/472970.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css hover变成手_web前端入门到实战:彻底掌握css动画「transition」

马上就2020年了&#xff0c;不知道小伙伴们今年学习了css3动画了吗&#xff1f;说起来css动画是一个很尬的事&#xff0c;一方面因为公司用css动画比较少&#xff0c;另一方面大部分开发者习惯了用JavaScript来做动画&#xff0c;所以就导致了许多程序员比较排斥来学习css动画(…

用Docker部署TensorFlow Serving服务

文章目录1. 安装 Docker2. 使用 Docker 部署3. 请求服务3.1 手写数字例子3.2 猫狗分类例子参考&#xff1a; https://tf.wiki/zh_hans/deployment/serving.html# https://tensorflow.google.cn/tfx/serving/docker 1. 安装 Docker 以下均为 centos7 环境 参考文章&#xff1a…

K-Means算法和K-Means++算法的聚类

在构成圆形的30000个随机样本点上&#xff0c;设置7个簇&#xff0c;使用K-Means算法聚类 from math import pi, sin, cos from collections import namedtuple from random import random, choice from copy import copy import matplotlib.pyplot as plt import numpy as np…

convert.todatetime指定日期格式_MATLAB的时间与日期

7 日期和时间MATLAB在2014b版本中将日期和时间独立成了一个数据类型&#xff0c;新的版本中对于时间数据的处理功能更为强大。比如datetime和duration等函数&#xff0c;可以支持对时间的高效计算、对比、格式化显示。对这类数组的操作方法和对普通数组的操作是基本一致的。下…

dategurd oracle_Oracle 时间和日期处理

-- Oracle时间SELECT SYSDATE FROM dual; -- 系统时间SELECT SYSTIMESTAMP FROM dual; -- 当前系统时间戳SELECT CURRENT_TIMESTAMP FROM dual; -- 与时区设置有关&#xff0c;返回的秒是系统的&#xff0c;返回的日期和时间是根据时区转换过的SELECT current_date FROM dual; …

关于有多个Fragment中的textview跑马灯问题

问题描述一个activity里面有多个Fragment,1,2,3,4其中fragment1中有2个textview,在第一次启动fragment1的时候跑马灯能正常跑马; 当跳转到其他fragment后,再回到fragment1的时候,跑马灯已经不跑马了?关于这个是textview的焦点问题吗?求大神解答,,,求大神解决.... 解决方案1应…

跨设备链路聚合_路由与交换技术(华为设备)第五讲---链路聚合

前言&#xff1a;随着网络规模不断扩大&#xff0c;用户对骨干链路的带宽和可靠性提出了越来越高的要求。在传统技术中&#xff0c;常用更换高速率的接口板或更换支持高速率接口板的设备的方式来增加带宽&#xff0c;但这种方案需要付出高额的费用&#xff0c;而且不够灵活。采…

电影评论分类:二分类问题

根据电影评论的 文字内容将其划分为正面或负面。 使用IMDB 数据集&#xff0c;它包含来自互联网电影数据库&#xff08;IMDB&#xff09;的50 000 条严重两极分 化的评论。数据集被分为用于训练的25 000 条评论与用于测试的25 000 条评论&#xff0c;训练集和测试 集都包含50%…

TensorFlow 2.0 - tf.distribute 分布式训练

文章目录1. 单机多卡 MirroredStrategy2. 多机训练 MultiWorkerMirroredStrategy3. TPU 张量处理单元学习于&#xff1a;简单粗暴 TensorFlow 2 1. 单机多卡 MirroredStrategy # 分布式训练 import tensorflow as tf import tensorflow_datasets as tfds# 1 单机多卡 Mirrore…

python抽象基类的作用_Python:多态、鸭子模型和抽象基类

1. 多态什么是多态-- 多态&#xff0c;指的是一种事务具有多种形态&#xff1b;-- python是一种动态语言&#xff0c;默认支持多态&#xff0c;同一个方法 调用 不同的类对象 &#xff0c;执行的 结果各不相同&#xff1b;多态实现-- 继承&#xff1a;不同子类 继承 同一父类&a…

非抢占式优先级调度算法_华为鸿蒙操作系统内核真面目之抢占式和非抢占式内核...

华为鸿蒙操作系统内核真面目之抢占式和非抢占式内核众所周知华为鸿蒙操作系统内核是Linux内核。而Linux内核即是抢占式内核也是非抢占式内核。设置软件优先级在优先级在0-99之间是抢占式优先级。设置优先级在100-139之间是非抢占式优先级。从华为官方发布的信息--优先级高的任务…

windows下python 使用CRF++ python接口的配置

1. 下载包含python接口的版本的CRF并安装&#xff0c;安装成功后查看python文件夹包含setup.py 文件&#xff0c;内容如下&#xff1a; #!/usr/bin/env python from distutils.core import setup,Extension,os import string setup(name "mecab-python", p…

TensorFlow 2.0 - Hub 模型复用

文章目录1. tfhub2. 例子&#xff1a;神经风格转换3. retrain 例子学习于&#xff1a;简单粗暴 TensorFlow 2 1. tfhub 网址&#xff1a; https://hub.tensorflow.google.cn/ https://tfhub.dev/ 可以搜索&#xff0c;下载模型 安装包 pip install tensorflow-hub import…

微服务 注册中心的作用_102,谈谈微服务注册中心zookeeperamp;Eureka

首先&#xff0c;大家要明确一点微服务注册中心是一个重要的组件&#xff0c;解决的是服务的注册和发现的问题&#xff0c;而zookeeper&#xff0c;Eureka都只是其中一款落地实现的产品&#xff0c;再比如Nacos也是如此&#xff0c;所以关键是掌握注册中心的工作原理&#xff0…

python2转python3代码_2to3 – 自动Python 2到3代码翻译 – 开发工具(Python教程)(参考资料)...

使用2to3 2to3通常与Python解释器一起安装为脚本。它也位于Python根目录的Tools/scripts目录下 2to3的基本参数是要转换的文件或目录列表。这些目录以递归方式遍历Python源. 这是一个示例Python 2.x源文件&#xff0c; def greet(name): print "Hello, {0}!".format(…

文本表示

1 one-hot representation 该单词对应所在元素为1&#xff0c;向量中其他元素均为0&#xff0c;向量的维度就等于词库中的单词数目  所有向量都是互相正交的&#xff0c;我们无法有效的表示两个向量间的相似度  向量维度过大。 from sklearn.feature_extraction.text…

天池 在线编程 课程表(拓扑排序 + 回溯)

文章目录1. 题目2. 解题1. 题目 总共有n个课程&#xff0c;从0到n-1。 有些课程可能有先决条件&#xff0c;例如&#xff0c;你想修课程0&#xff0c;你必须先修一门课程1&#xff0c;这两门课之间的关系表示为:[0,1] 给定课程的总数和先决条件对的列表&#xff0c;返回你可以…

fence机制 linux_Linux ha fence设备测试

另外&#xff0c;在配置RHCS5.3时&#xff0c;Fence设备只ping通还不行&#xff0c;还必须经过测试&#xff0c;我在网上找了一篇IPMI的文章&#xff0c;现粘贴如下&#xff1a;What is IPMI?Intelligent Platform Management Interface[edit]AdvantagesLow cost.Available on…

Apache2.4 与 PHP 5.5 64位版的安装配置

我的环境&#xff1a;windows7 旗舰版 64位 首先下载相关文件&#xff1a; php 5.5.0 windows 64版 http://windows.php.net/download/#php-5.5 &#xff08;选择 64位的下载&#xff09; apache2.4 压缩版下载 http://www.apachelounge.com/download/VC11/ 下载版本一定要对应…

java 父子级json组装不用递归_2020面试阿里Java研发岗题库总结,想虐面试官不能错过的面试宝典...

前言:虽然天猫&#xff0c;蚂蚁金&#xff0c;菜鸟都归属阿里旗下&#xff0c;但每个面试官问的问题都不一样&#xff0c;相同点主要在流程方面。面试开始会让自我介绍&#xff0c;主要业务架构和技术架构两部分。业务架构一般不会深究&#xff0c;但要面试官听明白&#xff0c…