css打造三角碎片金光闪闪动画效果代码
代码语言：html
所属分类：粒子
代码描述：css打造三角碎片金光闪闪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background: black;
height: 100vh;
overflow: hidden;
display: flex;
font-family: "Anton", sans-serif;
justify-content: center;
align-items: center;
}
div {
position: absolute;
}
.gold .graphic {
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #a98545 transparent;
-webkit-animation: rotateY 3000ms linear infinite, goldColor 750ms linear infinite alternate;
animation: rotateY 3000ms linear infinite, goldColor 750ms linear infinite alternate;
}
.gold .graphic::before {
content: "";
position: absolute;
top: 0;
background: linear-gradient(90deg, rgba(169, 133, 69, 0) 0%, rgba(169, 133, 69, 0.1) 40%, rgba(169, 133, 69, 0.4) 50%, rgba(169, 133, 69, 0.1) 60%, rgba(169, 133, 69, 0) 100%);
transform: translateX(-50%);
-webkit-animation: reflect 750ms linear infinite alternate;
animation: reflect 750ms linear infinite alternate;
}
.gold .graphic::after {
content: "";
position: absolute;
background: linear-gradient(0deg, rgba(169, 133, 69, 0) 0%, rgba(169, 133, 69, 0.1) 40%, rgba(169, 133, 69, 0.4) 50%, rgba(169, 133, 69, 0.1) 60%, rgba(169, 133, 69, 0) 100%);
transform: translateY(-50%);
-webkit-animation: reflect 750ms linear infinite alternate;
animation: reflect 750ms linear infinite alternate;
}
.gold:nth-child(1) {
top: calc(50% + -36px);
left: 23%;
transform: rotateZ(130deg);
}
.gold:nth-child(1) .graphic {
border-width: 0 7px 8px 3px;
-webkit-animation-delay: -6038ms, -6038ms;
animation-delay: -6038ms, -6038ms;
}
.gold:nth-child(1) .graphic::before {
left: 2px;
width: 120px;
height: 8px;
-webkit-animation-delay: -6038ms;
animation-delay: -6038ms;
}
.gold:nth-child(1) .graphic::after {
top: 4px;
left: -3px;
width: 10px;
height: 96px;
-webkit-animation-delay: -6038ms;
animation-delay: -6038ms;
}
.gold:nth-child(1) .rotate {
-webkit-animation: rotateZ 16287ms linear infinite;
animation: rotateZ 16287ms linear infinite;
}
.gold:nth-child(2) {
top: calc(50% + 67px);
left: 40%;
transform: rotateZ(183deg);
}
.gold:nth-child(2) .graphic {
border-width: 0 3px 10px 6px;
-webkit-animation-delay: -3355ms, -3355ms;
animation-delay: -3355ms, -3355ms;
}
.gold:nth-child(2) .graphic::before {
left: -1.5px;
width: 108px;
height: 10px;
-webkit-animation-delay: -3355ms;
animation-delay: -3355ms;
}
.gold:nth-child(2) .graphic::after {
top: 5px;
left: -6px;
width: 9px;
height: 120px;
-webkit-animation-delay: -3355ms;
animation-delay: -3355ms;
}
.gold:nth-child(2) .rotate {
-webkit-animation: rotateZ 17013ms linear infinite;
animation: rotateZ 17013ms linear infinite;
}
.gold:nth-child(3) {
top: calc(50% + -21px);
left: 93%;
transform: rotateZ(315deg);
}
.gold:nth-child(3) .graphic {
border-width: 0 6px 11px 4px;
-webkit-animation-delay: -5767ms, -5767ms;
animation-delay: -5767ms, -5767ms;
}
.gold:nth-child(3) .graphic::before {
left: 1px;
width: 120px;
height: 11px;
-webkit-animation-delay: -5767ms;
animation-delay: -5767ms;
}
.gold:nth-child(3) .graphic::after {
top: 5.5px;
left: -4px;
width: 10px;
height: 132px;
-webkit-animation-delay: -5767ms;
animation-delay: -5767ms;
}
.gold:nth-child(3) .rotate {
-webkit-animation: rotateZ 19179ms linear infinite;
animation: rotateZ 19179ms linear infinite;
}
.gold:nth-child(4) {
top: calc(50% + 27px);
left: 97%;
transform: rotateZ(191deg);
}
.gold:nth-child(4) .graphic {
border-width: 0 3px 9px 10px;
-webkit-animation-delay: -6089ms, -6089ms;
animation-delay: -6089ms, -6089ms;
}
.gold:nth-child(4) .graphic::before {
left: -3.5px;
width: 156px;
height: 9px;
-webkit-animation-delay: -6089ms;
animation-delay: -6089ms;
}
.gold:nth-child(4) .graphic::after {
top: 4.5px;
left: -10px;
width: 13px;
height: 108px;
-webkit-animation-delay: -6089ms;
animation-delay: -6089ms;
}
.gold:nth-child(4) .rotate {
-webkit-animation: rotateZ 13882ms linear infinite;
animation: rotateZ 13882ms linear infinite;
}
.gold:nth-child(5) {
top: calc(50% + -57px);
left: 11%;
transform: rotateZ(277deg);
}
.gold:nth-child(5) .graphic {
border-width: 0 12px 8px 5px;
-webkit-animation-delay: -228ms, -228ms;
animation-delay: -228ms, -228ms;
}
.gold:nth-child(5) .graphic::before {
left: 3.5px;
width: 204px;
height: 8px;
-webkit-animation-delay: -228ms;
animation-delay: -228ms;
}
.gold:nth-child(5) .graphic::after {
top: 4px;
left: -5px;
width: 17px;
height: 96px;
-webkit-animation-delay: -228ms;
animation-delay: -228ms;
}
.gold:nth-child(5) .rotate {
-webkit-animation: rotateZ 19225ms linear infinite;
animation: rotateZ 19225ms linear infinite;
}
.gold:nth-child(6) {
top: calc(50% + 23px);
left: 93%;
transform: rotateZ(287deg);
}
.gold:nth-child(6) .graphic {
border-width: 0 5px 11px 9px;
-webkit-animation-delay: -2521ms, -2521ms;
animation-delay: -2521ms, -2521ms;
}
.gold:nth-child(6) .graphic::before {
left: -2px;
width: 168px;
height: 11px;
-webkit-animation-delay: -2521ms;
animation-delay: -2521ms;
}
.gold:nth-child(6) .graphic::after {
top: 5.5px;
left: -9px;
width: 14px;
height: 132px;
-webkit-animation-delay: -2521ms;
animation-delay: -2521ms;
}
.gold:nth-child(6) .rotate {
-webkit-animation: rotateZ 11949ms linear infinite;
animation: rotateZ 11949ms linear infinite;
}
.gold:nth-child(7) {
top: calc(50% + -10px);
left: 78%;
transform: rotateZ(161deg);
}
.gold:nth-child(7) .graphic {
border-width: 0 4px 11px 3px;
-webkit-animation-delay: -7155ms, -7155ms;
animation-delay: -7155ms, -7155ms;
}
.gold:nth-child(7) .graphic::before {
left: 0.5px;
width: 84px;
height: 11px;
-webkit-animation-delay: -7155ms;
animation-delay: -7155ms;
}
.gold:nth-child(7) .graphic::after {
top: 5.5px;
left: -3px;
width: 7px;
height: 132px;
-webkit-animation-delay: -7155ms;
animation-delay: -7155ms;
}
.gold:nth-child(7) .rotate {
-webkit-animation: rotateZ 12909ms linear infinite;
animation: rotateZ 12909ms linear infinite;
}
.gold:nth-child(8) {
top: calc(50% + -32px);
left: 25%;
transform: rotateZ(229deg);
}
.gold:nth-child(8) .graphic {
border-width: 0 11px 6px 3px;
-webkit-animation-delay: -9671ms, -9671ms;
animation-delay: -9671ms, -9671ms;
}
.gold:nth-child(8) .graphic::before {
left: 4px;
width: 168px;
height: 6px;
-webkit-animation-delay: -9671ms;
animation-delay: -9671ms;
}
.gold:nth-child(8) .graphic::after {
top: 3px;
left: -3px;
width: 14px;
height: 72px;
-webkit-animation-delay: -9671ms;
animation-delay: -9671ms;
}
.gold:nth-child(8) .rotate {
-webkit-animation: rotateZ 13916ms linear infinite;
animation: rotateZ 13916ms linear infinite;
}
.gold:nth-child(9) {
top: calc(50% + -83px);
left: 55%;
transform: rotateZ(224deg);
}
.gold:nth-child(9) .graphic {
border-width: 0 10px 4px 3px;
-webkit-animation-delay: -2597ms, -2597ms;
animation-delay: -2597ms, -2597ms;
}
.gold:nth-child(9) .graphic::before {
left: 3.5px;
width: 156px;
height: 4px;
-webkit-animation-delay: -2597ms;
animation-delay: -2597ms;
}
.gold:nth-child(9) .graphic::after {
top: 2px;
left: -3px;
width: 13px;
height: 48px;
-webkit-animation-delay: -2597ms;
animation-delay: -2597ms;
}
.gold:nth-child(9) .rotate {
-webkit-animation: rotateZ 19187ms linear infinite;
animation: rotateZ 19187ms linear infinite;
}
.gold:nth-child(10) {
top: calc(50% + -89px);
left: 5%;
transform: rotateZ(149deg);
}
.gold:nth-child(10) .graphic {
border-width: 0 8px 11px 3px;
-webkit-animation-delay: -5922ms, -5922ms;
animation-delay: -5922ms, -5922ms;
}
.gold:nth-child(10) .graphic::before {
left: 2.5px;
width: 132px;
height: 11px;
-webkit-animation-delay: -5922ms;
animation-delay: -5922ms;
}
.gold:nth-child(10) .graphic::after {
top: 5.5px;
left: -3px;
width: 11px;
height: 132px;
-webkit-animation-delay: -5922ms;
animation-delay: -5922ms;
}
.gold:nth-child(10) .rotate {
-webkit-animation: rotateZ 19289ms linear infinite;
animation: rotateZ 19289ms linear infinite;
}
.gold:nth-child(11) {
top: calc(50% + 26px);
left: 99%;
transform: rotateZ(74deg);
}
.gold:nth-child(11) .graphic {
border-width: 0 7px 11px 8px;
-webkit-animation-delay: -8223ms, -8223ms;
animation-delay: -8223ms, -8223ms;
}
.gold:nth-child(11) .graphic::before {
left: -0.5px;
width: 180px;
height: 11px;
-webkit-animation-delay: -8223ms;
animation-delay: -8223ms;
}
.gold:nth-child(11) .graphic::after {
top: 5.5px;
left: -8px;
width: 15px;
height: 132px;
-webkit-animation-delay: -8223ms;
animation-delay: -8223ms;
}
.gold:nth-child(11) .rotate {
-webkit-animation: rotateZ 13614ms linear infinite;
animation: rotateZ 13614ms linear infinite;
}
.gold:nth-child(12) {
top: calc(50% + 40px);
left: 37%;
transform: rotateZ(121deg);
}
.gold:nth-child(12) .graphic {
border-width: 0 4px 5px 8px;
-webkit-animation-delay: -3955ms, -3955ms;
animation-delay: -3955ms, -3955ms;
}
.gold:nth-child(12) .graphic::before {
left: -2px;
width: 144px;
height: 5px;
-webkit-animation-delay: -3955ms;
animation-delay: -3955ms;
}
.gold:nth-child(12) .graphic::after {
top: 2.5px;
left: -8px;
width: 12px;
height: 60px;
-webkit-animation-delay: -3955ms;
animation-delay: -3955ms;
}
.gold:nth-child(12) .rotate {
-webkit-animation: rotateZ 10703ms linear infinite;
animation: rotateZ 10703ms linear infinite;
}
.gold:nth-child(13) {
top: calc(50% + -85px);
left: 62%;
transform: rotateZ(293deg);
}
.gold:nth-child(13) .graphic {
border-width: 0 9px 5px 8px;
-webkit-animation-delay: -1956ms, -1956ms;
animation-delay: -1956ms, -1956ms;
}
.gold:nth-child(13) .graphic::before {
left: 0.5px;
width: 204px;
height: 5px;
-webkit-animation-delay: -1956ms;
animation-delay: -1956ms;
}
.gold:nth-child(13) .graphic::after {
top: 2.5px;
left: -8px;
width: 17px;
height: 60px;
-webkit-animation-delay: -1956ms;
animation-delay: -1956ms;
}
.gold:nth-child(13) .rotate {
-webkit-animation: rotateZ 12360ms linear infinite;
animation: rotateZ 12360ms linear infinite;
}
.gold:nth-child(14) {
top: calc(50% + 79px);
left: 10%;
transform: rotateZ(190deg);
}
.gold:nth-child(14) .graphic {
border-width: 0 9px 9px 10px;
-webkit-animation-delay: -8644ms, -8644ms;
animation-delay: -8644ms, -8644ms;
}
.gold:nth-child(14) .graphic::before {
left: -0.5px;
width: 228px;
height: 9px;
-webkit-animation-delay: -8644ms;
animation-delay: -8644ms;
}
.gold:nth-child(14) .graphic::after {
top: 4.5px;
left: -10px;
width: 19px;
height: 108px;
-webkit-animation-delay: -8644ms;
animation-delay: -8644ms;
}
.gold:nth-child(14) .rotate {
-webkit-animation: rotateZ 17957ms linear infinite;
animation: rotateZ 17957ms linear infinite;
}
.gold:nth-child(15) {
top: calc(50% + 32px);
left: 62%;
transform: rotateZ(301deg);
}
.gold:nth-child(15) .graphic {
border-width: 0 3px 10px 4px;
-webkit-animation-delay: -1519ms, -1519ms;
animation-delay: -1519ms, -1519ms;
}
.gold:nth-child(15) .graphic::before {
left: -0.5px;
width: 84px;
height: 10px;
-webkit-animation-delay: -1519ms;
animation-delay: -1519ms;
}
.gold:nth-child(15) .graphic::after {
top: 5px;
left: -4px;
width: 7px;
height: 120px;
-webkit-animation-delay: -1519ms;
animation-delay: -1519ms;
}
.gold:nth-child(15) .rotate {
-webkit-animation: rotateZ 15738ms linear infinite;
animation: rotateZ 15738ms linear infinite;
}
.gold:nth-child(16) {
top: calc(50% + 33px);
left: 62%;
transform: rotateZ(234deg);
}
.gold:nth-child(16) .graphic {
border-width: 0 10px 6px 3px;
-webkit-animation-delay: -3296ms, -3296ms;
animation-delay: -3296ms, -3296ms;
}
.gold:nth-child(16) .graphic::before {
left: 3.5px;
width: 156px;
height: 6px;
-webkit-animation-delay: -3296ms;
animation-delay: -3296ms;
}
.gold:nth-child(16) .graphic::after {
top: 3px;
left: -3px;
width: 13px;
height: 72px;
-webkit-animation-delay: -3296ms;
animation-delay: -3296ms;
}
.gold:nth-child(16) .rotate {
-webkit-animation: rotateZ 11310ms linear infinite;
animation: rotateZ 11310ms linear infinite;
}
.gold:nth-child(17) {
top: calc(50% + -45px);
left: 79%;
transform: rotateZ(360deg);
}
.gold:nth-child(17) .graphic {
border-width: 0 4px 7px 9px;
-webkit-animation-delay: -569ms, -569ms;
animation-delay: -569ms, -569ms;
}
.gold:nth-child(17) .graphic::before {
left: -2.5px;
width: 156px;
height: 7px;
-webkit-animation-delay: -569ms;
animation-delay: -569ms;
}
.gold:nth-child(17) .graphic::after {
top: 3.5px;
left: -9px;
width: 13px;
height: 84px;
-webkit-animation-delay: -569ms;
animation-delay: -569ms;
}
.gold:nth-child(17) .rotate {
-webkit-animation: rotateZ 17126ms linear infinite;
animation: rotateZ 17126ms linear infinite;
}
.gold:nth-child(18) {
top: calc(50% + -93px);
left: 13%;
transform: rotateZ(360deg);
}
.gold:nth-child(18) .graphic {
border-width: 0 5px 8px 11px;
-webkit-animation-delay: -8788ms, -8788ms;
animation-delay: -8788ms, -8788ms;
}
.gold:nth-child(18) .graphic::before {
left: -3px;
width: 192px;
height: 8px;
-webkit-animation-delay: -8788ms;
animation-delay: -8788ms;
}
.gold:nth-child(18) .graphic::after {
top: 4px;
left: -11px;
width: 16px;
height: 96px;
-webkit-animation-delay: -8788ms;
animation-delay: -8788ms;
}
.gold:nth-child(18) .rotate {
-webkit-animation: rotateZ 10594ms linear infinite;
animation: rotateZ 10594ms linear infinite;
}
.gold:nth-child(19) {
top: calc(50% + 62px);
left: 87%;
transform: rotateZ(22deg);
}
.gold:nth-child(19) .graphic {
border-width: 0 12px 11px 10px;
-webkit-animation-delay: -9908ms, -9908ms;
animation-delay: -9908ms, -9908ms;
}
.gold:nth-child(19) .graphic::before {
left: 1px;
width: 264px;
height: 11px;
-webkit-animation-delay: -9908ms;
animation-delay: -9908ms;
}
.gold:nth-child(19) .graphic::after {
top: 5.5px;
left: -10px;
width: 22px;
height: 132px;
-webkit-animation-delay: -9908ms;
animation-delay: -9908ms;
}
.gold:nth-child(19) .rotate {
-webkit-animation: rotateZ 15897ms linear infinite;
animation: rotateZ 15897ms linear infinite;
}
.gold:nth-child(20) {
top: calc(50% + 77px);
left: 22%;
transform: rotateZ(157deg);
}
.gold:nth-child(20) .graphic {
border-width: 0 3px 9px 11px;
-webkit-animation-delay: -5520ms, -5520ms;
animation-delay: -5520ms, -5520ms;
}
.gold:nth-child(20) .graphic::before {
left: -4px;
width: 168px;
height: 9px;
-webkit-animation-delay: -5520ms;
animation-delay: -5520ms;
}
.gold:nth-child(20) .graphic::after {
top: 4.5px;
left: -11px;
width: 14px;
height: 108px;
-webkit-animation-delay: -5520ms;
animation-delay: -5520ms;
}
.gold:nth-child(20) .rotate {
-webkit-animation: rotateZ 16932ms linear infinite;
animation: rotateZ 16932ms linear infinite;
}
.gold:nth-child(21) {
top: calc(50% + -84px);
left: 18%;
transform: rotateZ(279deg);
}
.gold:nth-child(21) .graphic {
border-width: 0 3px 10px 11px;
-webkit-animation-delay: -5418ms, -5418ms;
animation-delay: -5418ms, -5418ms;
}
.gold:nth-child(21) .graphic::before {
left: -4px;
width: 168px;
height: 10px;
-webkit-animation-delay: -5418ms;
animation-delay: -5418ms;
}
.gold:nth-child(21) .graphic::after {
top: 5px;
left: -11px;
width: 14px;
height: 120px;
-webkit-animation-delay: -5418ms;
animation-delay: -5418ms;
}
.gold:nth-child(21) .rotate {
-webkit-animation: rotateZ 18639ms linear infinite;
animation: rotateZ 18639ms linear infinite;
}
.gold:nth-child(22) {
top: calc(50% + 39px);
left: 3%;
transform: rotateZ(77deg);
}
.gold:nth-child(22) .graphic {
border-width: 0 5px 6px 5px;
-webkit-animation-delay: -1115ms, -1115ms;
animation-delay: -1115ms, -1115ms;
}
.gold:nth-child(22) .graphic::before {
left: 0px;
width: 120px;
height: 6px;
-webkit-animation-delay: -1115ms;
animation-delay: -1115ms;
}
.gold:nth-child(22) .graphic::after {
top: 3px;
left: -5px;
width: 10px;
height: 72px;
-webkit-animation-delay: -1115ms;
animation-delay: -1115ms;
}
.gold:nth-child(22) .rotate {
-webkit-animation: rotateZ 13386ms linear infinite;
animation: rotateZ 13386ms linear infinite;
}
.gold:nth-child(23) {
top: calc(50% + 70px);
left: 91%;
transform: rotateZ(55deg);
}
.gold:nth-child(23) .graphic {
border-width: 0 9px 5px 5px;
-webkit-animation-delay: -4948ms, -4948ms;
animation-delay: -4948ms, -4948ms;
}
.gold:nth-child(23) .graphic::before {
left: 2px;
width: 168px;
height: 5px;
-webkit-animation-delay: -4948ms;
animation-delay: -4948ms;
}
.gold:nth-child(23) .graphic::after {
top: 2.5px;
left: -5px;
width: 14px;
height: 60px;
-webkit-animation-delay: -4948ms;
animation-delay: -4948ms;
}
.gold:nth-child(23) .rotate {
-webkit-animation: rotateZ 17450ms linear infinite;
animation: rotateZ 17450ms linear infinite;
}
.gold:nth-child(24) {
top: calc(50% + -20px);
left: 53%;
transform: rotateZ(320deg);
}
.gold:nth-child(24) .graphic {
border-width: 0 9px 11px 4px;
-webkit-animation-delay: -3475ms, -3475ms;
animation-delay: -3475ms, -3475ms;
}
.gold:nth-child(24) .graphic::before {
left: 2.5px;
width: 156px;
height: 11px;
-webkit-animation-delay: -3475ms;
animation-delay: -3475ms;
}
.gold:nth-child(24) .graphic::after {
top: 5.5px;
left: -4px;
width: 13px;
height: 132px;
-webkit-animation-delay: -3475ms;
animation-delay: -3475ms;
}
.gold:nth-child(24) .rotate {
-webkit-animation: rotateZ 14967ms linear infinite;
animation: rotateZ 14967ms linear infinite;
}
.gold:nth-child(25) {
top: calc(50% + 47px);
left: 2%;
transform: rotateZ(65deg);
}
.gold:nth-child(25) .graphic {
border-width: 0 12px 4px 7px;
-webkit-animation-delay: -6646ms, -6646ms;
animation-delay: -6646ms, -6646ms;
}
.gold:nth-child(25) .graphic::before {
left: 2.5px;
width: 228px;
height: 4px;
-webkit-animation-delay: -6646ms;
animation-delay: -6646ms;
}
.gold:nth-child(25) .graphic::after {
top: 2px;
left: -7px;
width: 19px;
height: 48px;
-webkit-animation-delay: -6646ms;
animation-delay: -6646ms;
}
.gold:nth-child(25) .rotate {
-webkit-animation: rotateZ 14093ms linear infinite;
animation: rotateZ 14093ms linear infinite;
}
.gold:nth-child(26) {
top: calc(50% + -58px);
left: 36%;
transform: rotateZ(283deg);
}
.gold:nth-child(26) .graphic {
border-width: 0 10px 6px 3px;
-webkit-animation-delay: -3144ms, -3144ms;
animation-delay: -3144ms, -3144ms;
}
.gold:nth-child(26) .graphic::before {
left: 3.5px;
width: 156px;
height: 6px;
-webkit-animation-delay: -3144ms;
animation-delay: -3144ms;
}
.gold:nth-child(26) .graphic::after {
top: 3px;
left: -3px;
width: 13px;
height: 72px;
-webkit-animation-delay: -3144ms;
animation-delay: -3144ms;
}
.gold:nth-child(26) .rotate {
-webkit-animation: rotateZ 19316ms linear infinite;
animation: rotateZ 19316ms linear infinite;
}
.gold:nth-child(27) {
top: calc(50% + -56px);
left: 6%;
transform: rotateZ(187deg);
}
.gold:nth-child(27) .graphic {
border-width: 0 9px 4px 7px;
-webkit-animation-delay: -3662ms, -3662ms;
animation-delay: -3662ms, -3662ms;
}
.gold:nth-child(27) .graphic::before {
left: 1px;
width: 192px;
height: 4px;
-webkit-animation-delay: -3662ms;
animation-delay: -3662ms;
}
.gold:nth-child(27) .graphic::after {
top: 2px;
left: -7px;
width: 16px;
height: 48px;
-webkit-animation-delay: -3662ms;
animation-delay: -3662ms;
}
.gold:nth-child(27) .rotate {
-webkit-animation: rotateZ 14648ms linear infinite;
animation: rotateZ 14648ms linear infinite;
}
.gold:nth-child(28) {
top: calc(50% + 26px);
left: 70%;
transform: rotateZ(182deg);
}
.gold:nth-child(28) .graphic {
border-width: 0 4px 11px 6px;
-webkit-animation-delay: -3224ms, -3224ms;
animation-delay: -3224ms, -3224ms;
}
.gold:nth-child(28) .graphic::before {
left: -1px;
width: 120px;
height: 11px;
-webkit-animation-delay: -3224ms;
animation-delay: -3224ms;
}
.gold:nth-child(28) .graphic::after {
top: 5.5px;
left: -6px;
width: 10px;
height: 132px;
-webkit-animation-delay: -3224ms;
animation-delay: -3224ms;
}
.gold:nth-child(28) .rotate {
-webkit-animation: rotateZ 13981ms linear infinite;
animation: rotateZ 13981ms linear infinite;
}
.gold:nth-child(29) {
top: calc(50% + 28px);
left: 60%;
transform: rotateZ(215deg);
}
.gold:nth-child(29) .graphic {
border-width: 0 6px 6px 11px;
-webkit-animation-delay: -8380ms, -8380ms;
animation-delay: -8380ms, -8380ms;
}
.gold:nth-child(29) .graphic::before {
left: -2.5px;
width: 204px;
height: 6px;
-webkit-animation-delay: -8380ms;
animation-delay: -8380ms;
}
.gold:nth-child(29) .graphic::after {
top: 3px;
left: -11px;
width: 17px;
height: 72px;
-webkit-animation-delay: -8380ms;
animation-delay: -8380ms;
}
.gold:nth-child(29) .rotate {
-webkit-animation: rotateZ 14896ms linear infinite;
animation: rotateZ 14896ms linear infinite;
}
.gold:nth-child(30) {
top: calc(50% + 50px);
left: 95%;
transform: rotateZ(324deg);
}
.gold:nth-child(30) .graphic {
border-width: 0 4px 10px 10px;
-webkit-animation-delay: -4040ms, -4040ms;
animation-delay: -4040ms, -4040ms;
}
.gold:nth-child(30) .graphic::before {
left: -3px;
width: 168px;
height: 10px;
-webkit-animation-delay: -4040ms;
animation-delay: -4040ms;
}
.gold:nth-child(30) .graphic::after {
top: 5px;
left: -10px;
width: 14px;
height: 120px;
-webkit-animation-delay: -4040ms;
animation-delay: -4040ms;
}
.gold:nth-child(30) .rotate {
-webkit-animation: rotateZ 14552ms linear infinite;
animation: rotateZ 14552ms linear infinite;
}
.gold:nth-child(31) {
top: calc(50% + 98px);
left: 17%;
transform: rotateZ(119deg);
}
.gold:nth-child(31) .graphic {
border-width: 0 12px 3px 4px;
-webkit-animation-delay: -7580ms, -7580ms;
animation-delay: -7580ms, -7580ms;
}
.gold:nth-child(31) .graphic::before {
left: 4px;
width: 192px;
height: 3px;
-webkit-animation-delay: -7580ms;
animation-delay: -7580ms;
}
.gold:nth-child(31) .graphic::after {
top: 1.5px;
left: -4px;
width: 16px;
height: 36px;
-webkit-animation-delay: -7580ms;
animation-delay: -7580ms;
}
.gold:nth-child(31) .rotate {
-webkit-animation: rotateZ 13951ms linear infinite;
animation: rotateZ 13951ms linear infinite;
}
.gold:nth-child(32) {
top: calc(50% + 53px);
left: 37%;
transform: rotateZ(118deg);
}
.gold:nth-child(32) .graphic {
border-width: 0 7px 10px 8px;
-webkit-animation-delay: -4424ms, -4424ms;
animation-delay: -4424ms, -4424ms;
}
.gold:nth-child(32) .graphic::before {
left: -0.5px;
width: 180px;
height: 10px;
-webkit-animation-delay: -4424ms;
animation-delay: -4424ms;
}
.gold:nth-child(32) .graphic::after {
top: 5px;
left: -8px;
width: 15px;
height: 120px;
-webkit-animation-delay: -4424ms;
animation-delay: -4424ms;
}
.gold:nth-child(32) .rotate {
-webkit-animation: rotateZ 10263ms linear infinite;
animation: rotateZ 10263ms linear infinite;
}
.gold:nth-child(33) {
top: calc(50% + 88px);
left: 43%;
transform: rotateZ(249deg);
}
.gold:nth-child(33) .graphic {
border-width: 0 6px 10px 3px;
-webkit-animation-delay: -1814ms, -1814ms;
animation-delay: -1814ms, -1814ms;
}
.gold:nth-child(33) .graphic::before {
left: 1.5px;
width: 108px;
height: 10px;
-webkit-animation-delay: -1814ms;
animation-delay: -1814ms;
}
.gold:nth-child(33) .graphic::after {
top: 5px;
left: -3px;
width: 9px;
height: 120px;
-webkit-animation-delay: -1814ms;
animation-delay: -1814ms;
}
.gold:nth-child(33) .rotate {
-webkit-animation: rotateZ 11800ms linear infinite;
animation: rotateZ 11800ms linear infinite;
}
.gold:nth-child(34) {
top: calc(50% + -54px);
left: 75%;
transform: rotateZ(40deg);
}
.gold:nth-child(34) .graphic {
border-width: 0 5px 11px 12px;
-webkit-animation-delay: -4148ms, -4148ms;
animation-delay: -4148ms, -4148ms;
}
.gold:nth-child(34) .graphic::before {
left: -3.5px;
width: 204px;
height: 11px;
-webkit-animation-delay: -4148ms;
animation-delay: -4148ms;
}
.gold:nth-child(34) .graphic::after {
top: 5.5px;
left: -12px;
width: 17px;
height: 132px;
-webkit-animation-delay: -4148ms;
animation-delay: -4148ms;
}
.gold:nth-child(34) .rotate {
-webkit-animation: rotateZ 17292ms linear infinite;
animation: rotateZ 17292ms linear infinite;
}
.gold:nth-child(35) {
top: calc(50% + 82px);
left: 8%;
transform: rotateZ(253deg);
}
.gold:nth-child(35) .graphic {
border-width: 0 8px 11px 11px;
-webkit-animation-delay: -7461ms, -7461ms;
animation-delay: -7461ms, -7461ms;
}
.gold:nth-child(35) .graphic::before {
left: -1.5px;
width: 228px;
height: 11px;
-webkit-animation-delay: -7461ms;
animation-delay: -7461ms;
}
.gold:nth-child(35) .graphic::after {
top: 5.5px;
left: -11px;
width: 19px;
height: 132px;
-webkit-animation-delay: -7461ms;
animation-delay: -7461ms;
}
.gold:nth-child(35) .rotate {
-webkit-animation: rotateZ 19604ms linear infinite;
animation: rotateZ 19604ms linear infinite;
}
.gold:nth-child(36) {
top: calc(50% + 51px);
left: 17%;
transform: rotateZ(321deg);
}
.gold:nth-child(36) .graphic {
border-width: 0 10px 6px 3px;
-webkit-animation-delay: -6697ms, -6697ms;
animation-delay: -6697ms, -6697ms;
}
.gold:nth-child(36) .graphic::before {
left: 3.5px;
width: 156px;
height: 6px;
-webkit-animation-delay: -6697ms;
animation-delay: -6697ms;
}
.gold:nth-child(36) .graphic::after {
top: 3px;
left: -3px;
width: 13px;
height: 72px;
-webkit-animation-delay: -6697ms;
animation-delay: -6697ms;
}
.gold:nth-child(36) .rotate {
-webkit-animation: rotateZ 17872ms linear infinite;
animation: rotateZ 17872ms linear infinite;
}
.gold:nth-child(37) {
top: calc(50% + 4px);
left: 71%;
transform: rotateZ(267deg);
}
.gold:nth-child(37) .graphic {
border-width: 0 9px 8px 6px;
-webkit-animation-delay: -6980ms, -6980ms;
animation-delay: -6980ms, -6980ms;
}
.gold:nth-child(37) .graphic::before {
left: 1.5px;
width: 180px;
height: 8px;
-webkit-animation-delay: -6980ms;
animation-delay: -6980ms;
}
.gold:nth-child(37) .graphic::after {
top: 4px;
left: -6px;
width: 15px;
height: 96px;
-webkit-animation-delay: -6980ms;
animation-delay: -6980ms;
}
.gold:nth-child(37) .rotate {
-webkit-animation: rotateZ 12224ms linear infinite;
animation: rotateZ 12224ms linear infinite;
}
.gold:nth-child(38) {
top: calc(50% + 15px);
left: 14%;
transform: rotateZ(53deg);
}
.gold:nth-child(38) .graphic {
border-width: 0 12px 7px 12px;
-webkit-animation-delay: -9813ms, -9813ms;
animation-delay: -9813ms, -9813ms;
}
.gold:nth-child(38) .graphic::before {
left: 0px;
width: 288px;
height: 7px;
-webkit-animation-delay: -9813ms;
animation-delay: -9813ms;
}
.gold:nth-child(38) .graphic::after {
top: 3.5px;
left: -12px;
width: 24px;
height: 84px;
-webkit-animation-delay: -9813ms;
animation-delay: -9813ms;
}
.gold:nth-child(38) .rotate {
-webkit-animation: rotateZ 16106ms linear infinite;
animation: rotateZ 16106ms linear infinite;
}
.gold:nth-child(39) {
top: calc(50% + -54px);
left: 10%;
transform: rotateZ(228deg);
}
.gold:nth-child(39) .graphic {
border-width: 0 7px 7px 5px;
-webkit-animation-delay: -5264ms, -5264ms;
animation-delay: -5264ms, -5264ms;
}
.gold:nth-child(39) .graphic::before {
left: 1px;
width: 144px;
height: 7px;
-webkit-animation-delay: -5264ms;
animation-delay: -5264ms;
}
.gold:nth-child(39) .graphic::after {
top: 3.5px;
left: -5px;
width: 12px;
height: 84px;
-webkit-animation-delay: -5264ms;
animation-delay: -5264ms;
}
.gold:nth-child(39) .rotate {
-webkit-animation: rotateZ 19747ms linear infinite;
animation: rotateZ 19747ms linear infinite;
}
.gold:nth-child(40) {
top: calc(50% + -93px);
left: 41%;
transform: rotateZ(263deg);
}
.gold:nth-child(40) .graphic {
border-width: 0 6px 5px 11px;
-webkit-animation-delay: -5074ms, -5074ms;
animation-delay: -5074ms, -5074ms;
}
.gold:nth-child(40) .graphic::before {
left: -2.5px;
width: 204px;
height: 5px;
-webkit-animation-delay: -5074ms;
animation-delay: -5074ms;
}
.gold:nth-child(40) .graphic::after {
top: 2.5px;
left: -11px;
width: 17px;
height: 60px;
-webkit-animation-delay: -5074ms;
animation-delay: -5074ms;
}
.gold:nth-child(40) .rotate {
-webkit-animation: rotateZ 15163ms linear infinite;
animation: rotateZ 15163ms linear infinite;
}
.gold:nth-child(41) {
top: calc(50% + 34px);
left: 26%;
transform: rotateZ(288deg);
}
.gold:nth-child(41) .graphic {
border-width: 0 3px 10px 3px;
-webkit-animation-delay: -1643ms, -1643ms;
animation-delay: -1643ms, -1643ms;
}
.gold:nth-child(41) .graphic::before {
left: 0px;
width: 72px;
height: 10px;
-webkit-animation-delay: -1643ms;
animation-delay: -1643ms;
}
.gold:nth-child(41) .graphic::after {
top: 5px;
left: -3px;
width: 6px;
height: 120px;
-webkit-animation-delay: -1643ms;
animation-delay: -1643ms;
}
.gold:nth-child(41) .rotate {
-webkit-animation: rotateZ 18352ms linear infinite;
animation: rotateZ 18352ms linear infinite;
}
.gold:nth-child(42) {
top: calc(50% + -85px);
left: 89%;
transform: rotateZ(359deg);
}
.gold:nth-child(42) .graphic {
border-width: 0 10px 5px 12px;
-webkit-animation-delay: -9925ms, -9925ms;
animation-delay: -9925ms, -9925ms;
}
.gold:nth-child(42) .graphic::before {
left: -1px;
width: 264px;
height: 5px;
-webkit-animation-delay: -9925ms;
animation-delay: -9925ms;
}
.gold:nth-child(42) .graphic::after {
top: 2.5px;
left: -12px;
width: 22px;
height: 60px;
-webkit-animation-delay: -9925ms;
animation-delay: -9925ms;
}
.gold:nth-child(42) .rotate {
-webkit-animation: rotateZ 14150ms linear infinite;
animation: rotateZ 14150ms linear infinite;
}
.gold:nth-child(43) {
top: calc(50% + -95px);
left: 15%;
transform: rotateZ(17deg);
}
.gold:nth-child(43) .graphic {
border-width: 0 10px 4px 7px;
-webkit-animation-delay: -6493ms, -6493ms;
animation-delay: -6493ms, -6493ms;
}
.gold:nth-child(43) .graphic::before {
left: 1.5px;
width: 204px;
height: 4px;
-webkit-animation-delay: -6493ms;
animation-delay: -6493ms;
}
.gold:nth-child(43) .graphic::after {
top: 2px;
left: -7px;
width: 17px;
height: 48px;
-webkit-animation-delay: -6493ms;
animation-delay: -6493ms;
}
.gold:nth-child(43) .rotate {
-webkit-animation: rotateZ 14148ms linear infinite;
animation: rotateZ 14148ms linear infinite;
}
.gold:nth-child(44) {
top: calc(50% + 71px);
left: 67%;
transform: rotateZ(68deg);
}
.gold:nth-child(44) .graphic {
border-width: 0 8px 12px 11px;
-webkit-animation-delay: -434ms, -434ms;
animation-delay: -434ms, -434ms;
}
.gold:nth-child(44) .graphic::before {
left: -1.5px;
width: 228px;
height: 12px;
-webkit-animation-delay: -434ms;
animation-delay: -434ms;
}
.gold:nth-child(44) .graphic::after {
top: 6px;
left: -11px;
width: 19px;
height: 144px;
-webkit-animation-delay: -434ms;
animation-delay: -434ms;
}
.gold:nth-child(44) .rotate {
-webkit-animation: rotateZ 10339ms linear infinite;
animation: rotateZ 10339ms linear infinite;
}
.gold:nth-child(45) {
top: calc(50% + 42px);
left: 40%;
transform: rotateZ(337deg);
}
.gold:nth-child(45) .graphic {
border-width: 0 5px 6px 12px;
-webkit-animation-delay: -3628ms, -3628ms;
animation-delay: -3628ms, -3628ms;
}
.gold:nth-child(45) .graphic::before {
left: -3.5px;
width: 204px;
height: 6px;
-webkit-animation-delay: -3628ms;
animation-delay: -3628ms;
}
.gold:nth-child(45) .graphic::after {
top: 3px;
left: -12px;
width: 17px;
height: 72px;
-webkit-animation-delay: -3628ms;
animation-delay: -3628ms;
}
.gold:nth-child(45) .rotate {
-webkit-animation: rotateZ 12467ms linear infinite;
animation: rotateZ 12467ms linear infinite;
}
.gold:nth-child(46) {
top: calc(50% + -77px);
left: 80%;
transform: rotateZ(237deg);
}
.gold:nth-child(46) .graphic {
border-width: 0 11px 7px 3px;
-webkit-animation-delay: -6445ms, -6445ms;
animation-delay: -6445ms, -6445ms;
}
.gold:nth-child(46) .graphic::before {
left: 4px;
width: 168px;
height: 7px;
-webkit-animation-delay: -6445ms;
animation-delay: -6445ms;
}
.gold:nth-child(46) .graphic::after {
top: 3.5px;
left: -3px;
width: 14px;
height: 84px;
-webkit-animation-delay: -6445ms;
animation-delay: -6445ms;
}
.gold:nth-child(46) .rotate {
-webkit-animation: rotateZ 10183ms linear infinite;
animation: rotateZ 10183ms linear infinite;
}
.gold:nth-child(47) {
top: calc(50% + -73px);
left: 91%;
transform: rotateZ(44deg);
}
.gold:nth-child(47) .graphic {
border-width: 0 8px 6px 10px;
-webkit-animation-delay: -9424ms, -9424ms;
animation-delay: -9424ms, -9424ms;
}
.gold:nth-child(47) .graphic::before {
left: -1px;
width: 216px;
height: 6px;
-webkit-animation-delay: -9424ms;
animation-delay: -9424ms;
}
.gold:nth-child(47) .graphic::after {
top: 3px;
left: -10px;
width: 18px;
height: 72px;
-webkit-animation-delay: -9424ms;
animation-delay: -9424ms;
}
.gold:nth-child(47) .rotate {
-webkit-animation: rotateZ 16621ms linear infinite;
animation: rotateZ 16621ms linear infinite;
}
.gold:nth-child(48) {
top: calc(50% + 99px);
left: 87%;
transform: rotateZ(69deg);
}
.gold:nth-child(48) .graphic {
border-width: 0 5px 3px 8px;
-webkit-animation-delay: -6279ms, -6279ms;
animation-delay: -6279ms, -6279ms;
}
.gold:nth-child(48) .graphic::before {
left: -1.5px;
width: 156px;
height: 3px;
-webkit-animation-delay: -6279ms;
animation-delay: -6279ms;
}
.gold:nth-child(48) .graphic::after {
top: 1.5px;
left: -8px;
width: 13px;
height: 36px;
-webkit-animation-delay: -6279ms;
animation-delay: -6279ms;
}
.gold:nth-child(48) .rotate {
-webkit-animation: rotateZ 10430ms linear infinite;
animation: rotateZ 10430ms linear infinite;
}
.gold:nth-child(49) {
top: calc(50% + 6px);
left: 29%;
transform: rotateZ(315deg);
}
.gold:nth-child(49) .graphic {
border-width: 0 10px 12px 8px;
-webkit-animation-delay: -4244ms, -4244ms;
animation-delay: -4244ms, -4244ms;
}
.gold:nth-child(49) .graphic::before {
left: 1px;
width: 216px;
height: 12px;
-webkit-animation-delay: -4244ms;
animation-delay: -4244ms;
}
.gold:nth-child(49) .graphic::after {
top: 6px;
left: -8px;
width: 18px;
height: 144px;
-webkit-animation-delay: -4244ms;
animation-delay: -4244ms;
}
.gold:nth-child(49) .rotate {
-webkit-animation: rotateZ 14831ms linear infinite;
animation: rotateZ 14831ms linear infinite;
}
.gold:nth-child(50) {
top: calc(50% + -58px);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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