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;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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