1.实现效果
raoqiu.gif
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:
image.png
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:
image.png
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 旋转，在参数中规定角度。在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
6e29a5ccecf84e5798e94253939284a0.gif
eg：
div{
transform: rotate(30deg);
}
2.3.2 rotateX(3D)
rotateX：CSS3 允许您使用 3D 转换来对元素进行格式化。rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
2.gif
eg:
div{
transform: rotateX(30deg);
}
2.3.3 rotateY(3D)
rotateY:CSS3 允许您使用 3D 转换来对元素进行格式化。围绕其在一个给定度数Y轴旋转的元素。
4.gif
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)。
5.gif
eg:
div{
transform: rotateZ(30deg);
}
2.3.5 rotate3d(3D)
rotate3d(x,y,z,angle) :定义 3D 旋转。
6.gif
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。
image.png
<div class="ball"></div>
以下为less：
.i-b {
display: inline-block;
}
.p-3d {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.ball {
&:extend(.i-b);
// Extend 是一个 Less 伪类，它将它所放置的选择器与匹配它所引用的选择器合并。
width: 200px;
height: 200px;
margin: 0;
border-radius: 50%;
position: relative;
background: #e6be74;
perspective: 1200px;
perspective-origin: 50% 50%;
&:extend(.p-3d);
&:before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: -40px 10px 70px 10px rgba(0, 0, 0, 0.5) inset;
z-index: 2;
}
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
.trans-all(translateX(64px) rotateX(90deg) translateZ(-113px) rotateY(-30deg));
z-index: -1;
}
}
.trans-all(@content) {
-webkit-transform: @content;
-moz-transform: @content;
-ms-transform: @content;
-o-transform: @content;
transform: @content;
}
-
画出第一道轨迹线（rotateZ+rotateY设置圆角度倾斜）。
image.png
<div class="circle-line1"></div>
.circle-line1 {
.create-circleLine(200px, 200px);
}
.line {
border-radius: 50%;
position: absolute;
border: 3px solid #5c5c6d;
transform: rotateZ(60deg) rotateY(105deg);
-webkit-transform: rotateZ(60deg) rotateY(105deg);
&:extend(.p-3d);
}
.create-circleLine(@a, @b) {
width: @a*2 ;
height: @b*2;
left: 50%;
top: 50%;
margin-left: -@a;
margin-top: -@b;
&:extend(.line);
}
-
为第一道轨迹线设置前后伪元素，before和after设置圆点。
image.png
.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);
}
-
设置第一道轨迹线设置前后伪元素转动动画。
7.gif
.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 class="ball">
<div class="circle-line1"></div>
<div class="circle-line2"></div>
<div class="circle-line3"></div>
</div>
</body>
<script src="../../less.1.7.3.js"></script>
</html>
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}
.i-b {
display: inline-block;
}
.p-3d {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.ball {
&:extend(.i-b);
width: 200px;
height: 200px;
margin: 0;
border-radius: 50%;
position: relative;
background: #e6be74;
perspective: 1200px;
perspective-origin: 50% 50%;
&:extend(.p-3d);
&:before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: -40px 10px 70px 10px rgba(0, 0, 0, 0.5) inset;
z-index: 2;
}
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
.trans-all(translateX(64px) rotateX(90deg) translateZ(-113px) rotateY(-30deg));
z-index: -1;
}
}
.trans-all(@content) {
-webkit-transform: @content;
-moz-transform: @content;
-ms-transform: @content;
-o-transform: @content;
transform: @content;
}
.line {
border-radius: 50%;
position: absolute;
border: 3px solid #5c5c6d;
transform: rotateZ(60deg) rotateY(105deg);
-webkit-transform: rotateZ(60deg) rotateY(105deg);
&:extend(.p-3d);
}
.create-circleLine(@a, @b) {
width: @a*2 ;
height: @b*2;
left: 50%;
top: 50%;
margin-left: -@a;
margin-top: -@b;
&:extend(.line);
}
.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);
}
.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);
}
}
.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);
}
}
.circle-line2 {
.create-circleLine(250px, 250px);
&::before {
.create-circle(10px, 10px, #87ceeb, move2);
.create-keyframes(move2, 0deg, 360deg, 250px, 105deg);
}
&::after {
.create-circle(10px, 10px, #48dbbb, move5);
.create-keyframes(move5, -180deg, 180deg, 250px, 105deg);
}
}
.circle-line3 {
.create-circleLine(160px, 160px);
&::before {
.create-circle(10px, 10px, #e44818, move3);
.create-keyframes(move3, 0deg, 360deg, 160px, 105deg);
}
&::after {
.create-circle(10px, 10px, #4396ce, move6);
.create-keyframes(move6, -180deg, 180deg, 160px, 105deg);
}
}
