css实现椭圆绕圈动画

藏宝库编辑 · 2024-9-20 01:07:31

1.实现结果

2.实现原理

2.1 box-shadow

box-shadow属性可以设置一个或多个下拉阴影的框。
boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

语法：
box-shadow: h-shadow v-shadow blur spread color inset;值阐明h-shadow必须的。程度阴影的位置。答应负值v-shadow必须的。垂直阴影的位置。答应负值blur可选。暗昧间隔spread可选。阴影的巨细color可选。阴影的颜色。在CSS颜色值探求颜色值的完备列表inset可选。从外层的阴影（开始时）改变阴影内侧阴影eg:
div{width: 200px;height: 100px;background: #222;box-shadow: 0 0 0 6px #881515, 0 0 0 10px #ceb0b0, 0 0 0 15px #b0bace, 0 2px 5px 10px #c7e0c7 inset;}2.2 CSS radial-gradient() 函数

radial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中央点界说。为了创建径向渐变你必须设置两个停止色。

语法：
background:#000;//欣赏器不支持时间展示background-image: radial-gradient(shape size at position, start-color, ..., last-color);值形貌shape确定圆的范例：
ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变size界说渐变的巨细，可能值：
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角。
closest-side ：指定径向渐变的半径长度为从圆心到离圆心迩来的边。
closest-corner ：指定径向渐变的半径长度为从圆心到离圆心迩来的角。
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边position界说渐变的位置。可能值：
center（默认）：设置中央为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。start-color, ..., last-color用于指定渐变的起止颜色。repeating-radial-gradient()：

repeating-radial-gradient() 函数用于创建重复的径向渐变 "图像"。

eg:

div { width: 200px; height: 200px; border-radius: 50%; border: 1px solid #222; background: radial-gradient(circle at 50% 50%, rgba(211, 28, 28) 5%, rgba(235, 178, 21) 30%, rgba(61, 132, 199) 50%); }2.3 CSS3 transform:rotate

2.3.1 rotate(2D)

rotate(angle) 界说 2D 旋转，在参数中规定角度。在一个给定度数顺时针旋转的元素。负值是答应的，如许是元素逆时针旋转。

eg：
div{ transform: rotate(30deg);}2.3.2 rotateX(3D)

rotateX：CSS3 答应您利用 3D 转换来对元素举行格式化。rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

eg:
div{ transform: rotateX(30deg);}2.3.3 rotateY(3D)

rotateY:CSS3 答应您利用 3D 转换来对元素举行格式化。围绕其在一个给定度数Y轴旋转的元素。

eg:
div{ transform: rotateY(30deg);}2.3.4 rotateZ(3D)

rotateZ:CSS3 答应您利用 3D 转换来对元素举行格式化。界说沿 Z 轴的 3D 旋转。rotateZ(a) 相称于 rotate(a) or rotate3d(0, 0, 1, a)。

eg:
div{ transform: rotateZ(30deg);}2.3.5 rotate3d(3D)

rotate3d(x,y,z,angle) :界说 3D 旋转。

eg:
div{ transform: rotate3d(1,1,1,30deg);}2.4 less的利用

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。这里出现的是 Less 的官方文档（中文版），包罗了 Less 语言以及利用 JavaScript 开辟的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。
由于 Less 和 CSS 非常像，因此很轻易学习。而且 Less 仅对 CSS 语言增长了少许方便的扩展，这就是 Less 云云易学的缘故原由之一。

在 Node.js 情况中利用 Less ：
npm install -g less在欣赏器情况中利用 Less ：
<link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="https://cdn.jsdelivr.net/npm/less@4" ></script>2.4.1变量（Variables）

@width: 10px;@height: @width + 10px;#header {  width: @width;  height: @height;}编译为：
#header {  width: 10px;  height: 20px;}2.4.2 嵌套（Nesting）

Less 提供了利用嵌套（nesting）取代层叠或与层叠团结利用的本领。假设我们有以下 CSS 代码：
#header {  color: black;}#header .navigation {  font-size: 12px;}#header .logo {  width: 300px;}用 Less 语言我们可以如许誊写代码：
#header {  color: black;  .navigation { font-size: 12px;  }  .logo { width: 300px;  }}用 Less 誊写的代码更加简便，而且模拟了 HTML 的构造结构。
2.4.3 混淆（Mixins）

混淆（Mixin）是一种将一组属性从一个规则集包罗（或混入）到另一个规则集的方法。假设我们界说了一个类（class）如下：
.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}假如我们盼望在别的规则会合利用这些属性呢？没标题，我们只需像下面如许输入所需属性的类（class）名称即可，如下所示：
#menu a {  color: #111;  .bordered();}.post a {  color: red;  .bordered();}.bordered 类所包罗的属性就将同时出如今 #menu a 和 .post a 中了。
2.4.4 extend

带扩展的选择器插值，Extend无法将选择器与变量匹配。假如选择器包罗变量，扩展将忽略它。但是，extend 可以附加到插值选择器。
减小 CSS 巨细
Mixins 将所有属性复制到选择器中，这可能导致不须要的重复。因此，您可以利用 extends 而不是 mixins 将选择器向上移动到您盼望利用的属性，从而淘汰天生的 CSS。
示例 - 利用 mixin：
.my-inline-block() {  display: inline-block;  font-size: 0;}.thing1 {  .my-inline-block;}.thing2 {  .my-inline-block;}输出
.thing1 {  display: inline-block;  font-size: 0;}.thing2 {  display: inline-block;  font-size: 0;}示例（带有扩展）：
.my-inline-block {  display: inline-block;  font-size: 0;}.thing1 {  &:extend(.my-inline-block);}.thing2 {  &:extend(.my-inline-block);}输出
.my-inline-block,.thing1,.thing2 {  display: inline-block;  font-size: 0;}3.实现步调

画一个圆,为其添加伪元素，before设置box-shadow为圆添加立体感，after利用径向渐变及rotate3d一些操纵实现圆阴影，整体设置perspective透视1200px。

<div</ul><div</ul>.circle-line1 { .create-circleLine(200px, 200px); &::before { .create-circle(10px, 10px, #d87093, move); transform: rotateZ(0deg) translateX(200px) rotateZ(-0deg) rotateY(-105deg); } &::after { .create-circle(10px, 10px, #ad4eda, move4); transform: rotateZ(180deg) translateX(200px) rotateZ(-180deg) rotateY(-105deg); } } .dot-center { border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}.create-circle(@a, @b, @color, @aname) { content: ''; width: @a; height: @b; background: @color; filter: drop-shadow(10px 10px 10px @color); animation: @aname 20s linear infinite; &:extend(.dot-center);}

设置第一道轨迹线设置前后伪元素转动动画。

.circle-line1 { .create-circleLine(200px, 200px); &::before { .create-circle(10px, 10px, #d87093, move); transform: rotateZ(0deg) translateX(200px) rotateZ(-0deg) rotateY(-105deg); .create-keyframes(move, 0deg, 360deg, 200px, 105deg); } &::after { .create-circle(10px, 10px, #ad4eda, move4); transform: rotateZ(180deg) translateX(200px) rotateZ(-180deg) rotateY(-105deg); .create-keyframes(move4, -180deg, 180deg, 200px, 105deg); }}.create-keyframes(@name, @z, @z1, @radius, @y) { @keyframes @name { .create-animation(@z, @z1, @radius, @y) } }.create-animation(@z, @z1, @radius, @y) { from { transform: rotateZ(@z) translateX(@radius) rotateZ(-@z) rotateY(-@y); } to { transform: rotateZ(@z1) translateX(@radius) rotateZ(-@z1) rotateY(-@y); }}

添加第二道，第三道轨迹，方法与上述内容划一，区别在于圆半径差别。

4.完备代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地球绕圈</title></head><link rel="stylesheet" href="../../common.css"><link rel="stylesheet/less" href="./raoqiu.less" /><body> <div苏苏的码云。假如对你有资助，接待你的star+订阅！

css实现椭圆绕圈动画

所属分类: 问答交流

新帖推荐: 30日

推荐作品