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

1.实现效果 css实现炫酷的圆环相交转动动画
文章图片

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)
css实现炫酷的圆环相交转动动画
文章图片

.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); }


  • 为每个圆弧设置transform进行一定角度的旋转
  • [x] 圆弧1:
css实现炫酷的圆环相交转动动画
文章图片

.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) } }

  • [x] 圆弧2:
    css实现炫酷的圆环相交转动动画
    文章图片
.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) } }

  • [x] 圆弧3:
    css实现炫酷的圆环相交转动动画
    文章图片
.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)
【css实现炫酷的圆环相交转动动画】css实现炫酷的圆环相交转动动画
文章图片


.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进行一定角度的旋转
    • [x] 圆弧1:
css实现炫酷的圆环相交转动动画
文章图片

.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) } }

  • [x] 圆弧2:
css实现炫酷的圆环相交转动动画
文章图片

.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.完整代码
- 锐客网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) } }

    推荐阅读