css实现炫酷的圆环相交转动动画

1.实现效果

2.实现原理

CSS perspective 属性：属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective 属性只影响 3D 转换元素。（请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。）

perspective: number（元素距离视图的距离，以像素计。）|none（默认值。与 0 相同。不设置透视。）

transform-style:让转换的子元素保留3D转换。指定嵌套元素是怎样在三维空间中呈现，使用此属性必须先使用 transform 属性.。

transform-style: flat（表示所有子元素在2D平面呈现）|preserve-3d（表示所有子元素在3D空间中呈现）;

pointer-events ：设置元素是否对鼠标事件做出反应。

pointer-events: auto|none;
/* 属性值 */
pointer-events: auto;//默认值，设置该属性链接可以正常点击访问
pointer-events: none;//元素不能对鼠标事件做出反应
pointer-events: visiblePainted; /* 只适用于 SVG */
pointer-events: visibleFill;    /* 只适用于 SVG */
pointer-events: visibleStroke;  /* 只适用于 SVG */
pointer-events: visible;        /* 只适用于 SVG */
pointer-events: painted;        /* 只适用于 SVG */
pointer-events: fill;           /* 只适用于 SVG */
pointer-events: stroke;         /* 只适用于 SVG */
pointer-events: all;            /* 只适用于 SVG */
/* 全局值 */
pointer-events: inherit;//从父元素继承该属性
pointer-events: initial;//initial 关键字用于设置 CSS 属性为它的默认值
pointer-events: unset;//

animation-delay：定义动画何时开始。
允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

animation-delay: -2s /* W3C 和 Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */

3.实现步骤

3.1图例demo1

画出三个半圆弧（只设置border-bottom）

.loading {position: relative;width: 8rem;height: 8rem;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-perspective: 40rem;perspective: 40rem;pointer-events: none;margin-bottom: 40px;
}.loading .line {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;border-bottom: 0.15rem solid var(--color);
}

<div class="loading"><div class="line"></div><div class="line"></div><div class="line"></div>
</div>

为每个圆弧设置transform进行一定角度的旋转
圆弧1：

.loading .line:first-child {-webkit-animation: rotate1 1.15s linear infinite;animation: rotate1 1.15s linear infinite;
}
.loading .line:first-child {-webkit-animation-delay: -.8s;animation-delay: -.8s;
}
@keyframes rotate1 {0% {-webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);transform: rotateX(35deg) rotateY(-45deg) rotate(0)}to {-webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);transform: rotateX(35deg) rotateY(-45deg) rotate(1turn)}
}

圆弧2：

.loading .line:nth-child(2) {-webkit-animation: rotate2 1.15s linear infinite;animation: rotate2 1.15s linear infinite
}
.loading .line:nth-child(2) {-webkit-animation-delay: -.4s;animation-delay: -.4s
}
@keyframes rotate2 {0% {-webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);transform: rotateX(50deg) rotateY(10deg) rotate(0)}to {-webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);transform: rotateX(50deg) rotateY(10deg) rotate(1turn)}
}

圆弧3：

.loading .line:nth-child(3) {-webkit-animation: rotate3 1.15s linear infinite;animation: rotate3 1.15s linear infinite
}
.loading .line:nth-child(3) {-webkit-animation-delay: 0s;animation-delay: 0s
}
@-webkit-keyframes rotate3 {0% {-webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);transform: rotateX(35deg) rotateY(55deg) rotate(0)}to {-webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);transform: rotateX(35deg) rotateY(55deg) rotate(1turn)}
}

3.2图例demo2

画出两个半圆弧（border-bottom+border-top）

<div class="loading loading2"><div class="line2"></div><div class="line2"></div>
</div>

.loading2 .line2 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;border-bottom: 0.1rem solid var(--color);border-top: 0.1rem solid var(--color);
}

为每个圆弧设置transform进行一定角度的旋转
圆弧1：

.loading2 .line2:nth-child(2) {-webkit-animation: rotate5 1.15s linear infinite;animation: rotate5 1.15s linear infinite
}
@keyframes rotate4 {0% {-webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0);transform: rotateX(55deg) rotateY(-30deg) rotate(0)}to {-webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);transform: rotateX(55deg) rotateY(-30deg) rotate(1turn)}
}

圆弧2:

.loading2 .line2:nth-child(2) {-webkit-animation: rotate5 1.15s linear infinite;animation: rotate5 1.15s linear infinite
}
@keyframes rotate5 {0% {-webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0);transform: rotateX(55deg) rotateY(30deg) rotate(0)}to {-webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn);transform: rotateX(55deg) rotateY(30deg) rotate(1turn)}
}

4.完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><link rel="stylesheet" type="text/css" href="../common.css" /><style type="text/css">body {background: #222;overflow: hidden;}:root {--color: rgba(255, 165, 0, 1);}.loading {position: relative;width: 8rem;height: 8rem;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-perspective: 40rem;perspective: 40rem;pointer-events: none;margin-bottom: 40px;}.loading .line {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;border-bottom: 0.15rem solid var(--color);}.loading .line:first-child {-webkit-animation: rotate1 1.15s linear infinite;animation: rotate1 1.15s linear infinite;}.loading .line:nth-child(2) {-webkit-animation: rotate2 1.15s linear infinite;animation: rotate2 1.15s linear infinite}.loading .line:nth-child(3) {-webkit-animation: rotate3 1.15s linear infinite;animation: rotate3 1.15s linear infinite}.loading .line:first-child {-webkit-animation-delay: -.8s;animation-delay: -.8s;}.loading .line:nth-child(2) {-webkit-animation-delay: -.4s;animation-delay: -.4s}.loading .line:nth-child(3) {-webkit-animation-delay: 0s;animation-delay: 0s}@keyframes rotate1 {0% {-webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);transform: rotateX(35deg) rotateY(-45deg) rotate(0)}to {-webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);transform: rotateX(35deg) rotateY(-45deg) rotate(1turn)}}@keyframes rotate2 {0% {-webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);transform: rotateX(50deg) rotateY(10deg) rotate(0)}to {-webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);transform: rotateX(50deg) rotateY(10deg) rotate(1turn)}}@keyframes rotate3 {0% {-webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);transform: rotateX(35deg) rotateY(55deg) rotate(0)}to {-webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);transform: rotateX(35deg) rotateY(55deg) rotate(1turn)}}/* 第二个 */.loading2 .line2 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;border-bottom: 0.1rem solid var(--color);border-top: 0.1rem solid var(--color);}.loading2 .line2:first-child {-webkit-animation: rotate4 1.15s linear infinite;animation: rotate4 1.15s linear infinite;}.loading2 .line2:nth-child(2) {-webkit-animation: rotate5 1.15s linear infinite;animation: rotate5 1.15s linear infinite}@keyframes rotate4 {0% {-webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0);transform: rotateX(55deg) rotateY(-30deg) rotate(0)}to {-webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);transform: rotateX(55deg) rotateY(-30deg) rotate(1turn)}}@keyframes rotate5 {0% {-webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0);transform: rotateX(55deg) rotateY(30deg) rotate(0)}to {-webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn);transform: rotateX(55deg) rotateY(30deg) rotate(1turn)}}</style><body><section><div class="loading"><div class="line"></div><div class="line"></div><div class="line"></div></div><div class="loading loading2"><div class="line2"></div><div class="line2"></div></div></section></body>
</html>

5.更多css相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

css实现炫酷的圆环相交转动动画相关推荐

HTML+CSS实现炫酷的登录界面
你好,我是罡罡同学! 代码谱第一页忘掉心上人,最后一页...... 谢谢大家的支持,您的一键三连是罡罡同学前进的最大动力! 打赏一点钱,帮我买包辣条,继续创作,谢大家! 一键三连一键三连一键三连 ...
CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画
作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始. 微信公众号:AlbertYang 今天教大家使用CS ...
纯css实现炫酷侧边栏
纯css实现炫酷侧边栏有疑问的小伙伴可以深入探讨学习
【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...
简要教程这是一款HTML5 SVG炫酷checkbox复选框动画特效.该checkbox动画特效使用svg来构建复选框效果,然后通过CSS3动画来控制复选框的选中和取消选中状态,效果非常炫酷. 使用 ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览源码下载使用方法 HTML ...
css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...

css实现炫酷的圆环相交转动动画

1.实现效果

2.实现原理

3.实现步骤

3.1图例demo1

3.2图例demo2

4.完整代码

5.更多css相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

css实现炫酷的圆环相交转动动画相关推荐

最新文章

热门文章