css实现立体多边形球体分裂loading加载动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：css实现立体多边形球体分裂loading加载动画效果代码
代码标签： 多边形 球体 分裂 loading 加载 动画 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
overflow: hidden;
background: #000;
}
.assembly {
transform: rotate(60deg) rotateX(-10.8113deg);
animation: switch 2s steps(1) infinite;
}
.assembly, .assembly *, .assembly :before {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
@keyframes switch {
50% {
transform: rotate(-60deg) rotateX(-10.8113deg);
}
}
.ring:nth-child(1) {
transform: rotate(0turn) rotateY(0deg) translateY(-0.00469em);
}
.ring:nth-child(1) .rotor, .ring:nth-child(1) .exploder {
animation: rot1 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.ring:nth-child(1) .exploder {
animation-name: pos1;
}
.ring:nth-child(1) .piece:nth-child(1) {
transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(1) .face:first-child {
color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(1) .face:last-child {
color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(2) {
transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(2) .face:first-child {
color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(2) .face:last-child {
color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(3) {
transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(3) .face:first-child {
color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(3) .face:last-child {
color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(4) {
transform: rotate(0.5turn) rotateY(36deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(4) .face:first-child {
color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(4) .face:last-child {
color: #4b1f0b;
}
.ring:nth-child(1) .piece:nth-child(5) {
transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(5) .face:first-child {
color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(5) .face:last-child {
color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(6) {
transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(6) .face:first-child {
color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(6) .face:last-child {
color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(7) {
transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(7) .face:first-child {
color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(7) .face:last-child {
color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(8) {
transform: rotate(0.5turn) rotateY(108deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(8) .face:first-child {
color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(8) .face:last-child {
color: #4b1f0b;
}
.ring:nth-child(1) .piece:nth-child(9) {
transform: rotate(0.5turn) rotateY(180deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(9) .face:first-child {
color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(9) .face:last-child {
color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(10) {
transform: rotate(0.5turn) rotateY(180deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(10) .face:first-child {
color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(10) .face:last-child {
color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(11) {
transform: rotate(0.5turn) rotateY(180deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(11) .face:first-child {
color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(11) .face:last-child {
color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(12) {
transform: rotate(0.5turn) rotateY(180deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(12) .face:first-child {
color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(12) .face:last-child {
color: #4b1f0b;
}
.ring:nth-child(1) .piece:nth-child(13) {
transform: rotate(0.5turn) rotateY(252deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(13) .face:first-child {
color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(13) .face:last-child {
color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(14) {
transform: rotate(0.5turn) rotateY(252deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(14) .face:first-child {
color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(14) .face:last-child {
color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(15) {
transform: rotate(0.5turn) rotateY(252deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(15) .face:first-child {
color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(15) .face:last-child {
color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(16) {
transform: rotate(0.5turn) rotateY(252deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(16) .face:first-child {
color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(16) .face:last-child {
color: #4b1f0b;
}
.ring:nth-child(1) .piece:nth-child(17) {
transform: rotate(0.5turn) rotateY(324deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(0deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(17) .face:first-child {
color: rgba(46, 88, 96, 0.25);
}
.ring:nth-child(1) .piece:nth-child(17) .face:last-child {
color: #7c3412;
}
.ring:nth-child(1) .piece:nth-child(18) {
transform: rotate(0.5turn) rotateY(324deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(120deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(18) .face:first-child {
color: rgba(38, 72, 78, 0.25);
}
.ring:nth-child(1) .piece:nth-child(18) .face:last-child {
color: #662b0f;
}
.ring:nth-child(1) .piece:nth-child(19) {
transform: rotate(0.5turn) rotateY(324deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(240deg) translateY(-2.3094em);
}
.ring:nth-child(1) .piece:nth-child(19) .face:first-child {
color: rgba(36, 69, 75, 0.25);
}
.ring:nth-child(1) .piece:nth-child(19) .face:last-child {
color: #61290e;
}
.ring:nth-child(1) .piece:nth-child(20) {
transform: rotate(0.5turn) rotateY(324deg) rotateX(52.64957deg) translateZ(6.05199em) rotate(180deg);
}
.ring:nth-child(1) .piece:nth-child(20) .face:first-child {
color: rgba(28, 53, 58, 0.25);
}
.ring:nth-child(1) .piece:nth-child(20) .face:last-child {
color: #4b1f0b;
}
@keyframes rot1 {
0%, 0% {
transform: none;
}
50%, 100% {
transform: rotateY(72deg);
}
}
@keyframes pos1 {
0%, 50%, 100% {
transform: none;
}
25% {
transform: translateZ(1.5em) translateY(-0.75em);
}
}
.ring:nth-child(2) {
transform: rotate(0turn) rotateY(0deg) translateY(0em);
}
.ring:nth-child(2) .rotor, .ring:nth-child(2) .exploder {
animation: rot2 1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.ring:nth-child(2) .exploder {
animation-name: pos2;
}
.ring:nth-child(2) .piece:nth-child(1) {
transform: rotateY(0deg) rotateX(10.8113deg) translateZ(6.04607em) rotate(180deg) translateY(-2.3094em);
}
.ring:nth-child(2) .piece:nth-child(1) .face:first-child {
color: rgba(46, 88, 96, 0.25);
}
.ri.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0