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 :
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.实现步骤 .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.完整代码 地球绕圈 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!