css实现椭圆绕圈动画
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 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设置圆角度倾斜)。
<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设置圆点。
.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 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);}}
5.更多css相关,尽在苏苏的码云如果对你有帮助,欢迎你的star+订阅!
css实现椭圆绕圈动画相关推荐
- css实现车轨动画转弯,css3实现沿椭圆轨迹旋转动画
需求 1.实现元素沿椭圆轨迹均匀旋转 2.鼠标点击事件.移入暂停运动 3.元素由远到近逐渐增大 网上关于css3实现旋转的案例很多,我也是借鉴别人方法,这里不细说直接上代码,通过css3实现的旋转动画 ...
- css 语音,用css完成语音助手小动画
用css完成语音助手小动画 2020年08月10日 | 萬仟网IT编程 | 我要评论 震惊!用css完成语音助手小动画不要太简单!语音助手动画定位布局添加动画语音助手动画hello大家好,我是Aaro ...
- 纯CSS制作加div制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- PS 逆时针绕圈文字
选择"椭圆工具" -> 选择"路径" 画出一个椭圆的路径来 用鼠标的指针指向椭圆的一边,出现"波浪线"的符号来,输入你想要的文字 选择 ...
- 纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...
- Cesium|xt3d绕圈飞行
Cesium|xt3d绕圈飞行 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...
- android刷新时的圆形动画_Android自定义加载圈动画效果
本文实例为大家分享了Android自定义加载圈动画展示的具体代码,供大家参考,具体内容如下 实现如下效果: 该效果图主要有3个动画: 1.旋转动画 2.聚合动画 3.扩散动画 以上3个动画都是通过Va ...
- [css] 什么是逐帧动画?
[css] 什么是逐帧动画? (1)相关联的不同图像,即动画帧:(2)连续播放. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通 ...
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- html div 子元素 过多 卡顿,CSS不定高元素transition动画的解决方案
CSS不定高元素transition动画的解决方案 类别: 技术·CSS 时间:2019-07-27 23:41:35 字数:3297 版权所有,未经允许,请勿转载,谢谢合作~ ### 前言 CSS中 ...
最新文章
- opencv java 摄像头_使用OpenCV Java创建Windows摄像头扫码程序
- 洛谷P1801 黑匣子 双堆套路的使用
- 十八、对已经找到轮廓的图像进行测量
- GDI+ 使用指南(basic guiding of GDI plus )
- Linux ssh 配置
- Influx kafka
- android AudioManager类 详解(1)
- tp3.2 判断请求类型
- 2022西电抗疫CTF个人赛
- Android之Activity界面劫持反劫持
- 认识机器学习与深度学习
- 自适应滤波器原理——新息过程
- JVM---数据存储和访问(类文件结构)
- JeecgBoot 框架中实现路由跳转页面,其他页面接收参数等使用方法
- 终于有大佬把“计算机底层原理“全部总结出来了
- 7-4 莫尔斯码(Morse Code) (25 分)
- LC28 Generate Parentheses
- iOS 界面流畅度研究
- 西北工业大学-技术经济学-MOOC课程截图笔记
- Eclipse中如何修改主题