.fl-cb { display: flex; display: -webkit-flex; align-items: center; justify-content: space-between; } /* 圆圈闪烁 */ @keyframes boderM { 0% { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); opacity: 0; } 20% { opacity: 1; } 75% { transform: translate(-50%, -50%) scale(2); -webkit-transform: translate(-50%, -50%) scale(2); opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes boderM { 0% { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); opacity: 0; } 20% { opacity: 1; } 75% { transform: translate(-50%, -50%) scale(2); -webkit-transform: translate(-50%, -50%) scale(2); opacity: 0; } 100% { opacity: 0; } } /* 横向滚动 */ @keyframes scroll-l { 0% { transform: translateX(-50%) translateZ(0px); -webkit-transform: translateX(-50%) translateZ(0px); } 100% { transform: translateX(0) translateZ(0px); -webkit-transform: translateX(0) translateZ(0px); } } @-webkit-keyframes scroll-l { 0% { transform: translateX(-50%) translateZ(0px); -webkit-transform: translateX(-50%) translateZ(0px); } 100% { transform: translateX(0) translateZ(0px); -webkit-transform: translateX(0) translateZ(0px); } } @keyframes scroll-r { 0% { transform: translateX(0) translateZ(0px); -webkit-transform: translateX(0) translateZ(0px); } 100% { transform: translateX(-50%) translateZ(0px); -webkit-transform: translateX(-50%) translateZ(0px); } } @-webkit-keyframes scroll-r { 0% { transform: translateX(0) translateZ(0px); -webkit-transform: translateX(0) translateZ(0px); } 100% { transform: translateX(-50%) translateZ(0px); -webkit-transform: translateX(-50%) translateZ(0px); } } @-webkit-keyframes firstCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 35% { -webkit-transform: translateX(2%) translateY(-14%); transform: translateX(2%) translateY(-14%); } 65% { -webkit-transform: translateX(5%) translateY(14%); transform: translateX(5%) translateY(14%); } to { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes firstCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 35% { -webkit-transform: translateX(2%) translateY(-14%); transform: translateX(2%) translateY(-14%); } 65% { -webkit-transform: translateX(5%) translateY(14%); transform: translateX(5%) translateY(14%); } to { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-webkit-keyframes secondCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(-9%) translateY(-1%); transform: translateX(-9%) translateY(-1%); } 75% { -webkit-transform: translateX(11%) translateY(-14%); transform: translateX(11%) translateY(-14%); } to { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes secondCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(-9%) translateY(-1%); transform: translateX(-9%) translateY(-1%); } 75% { -webkit-transform: translateX(11%) translateY(-14%); transform: translateX(11%) translateY(-14%); } to { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @-webkit-keyframes thirdCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 30% { -webkit-transform: translateX(5%) translateY(11%); transform: translateX(5%) translateY(11%); } 70% { -webkit-transform: translateX(-13%) translateY(-5%); transform: translateX(-13%) translateY(-5%); } to { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @keyframes thirdCircle { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 30% { -webkit-transform: translateX(5%) translateY(11%); transform: translateX(5%) translateY(11%); } 70% { -webkit-transform: translateX(-13%) translateY(-5%); transform: translateX(-13%) translateY(-5%); } to { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } .mainBox { width: 100%; } .ho2 { width: 100%; padding: 12.729vw 8.333vw 20vw; position: relative; overflow: hidden; background: linear-gradient( -180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 1) 700px, rgba(255, 255, 255, 1)) !important; display-radio: 1; } .ho2 .row { margin: 3.125vw 0 0; position: relative; } .ho2 .col { width: 100%; } .ho2 .origin { position: absolute; left: -20.833vw; top: 50%; transform: translateY(-50%); width: 62.5vw; height: 62.5vw; box-sizing: border-box; z-index: 3; /* pointer-events: none; */ } .rotate { width: 100%; height: 100%; transform: rotate(0); transition: all ease 0.5s; } .rotate .dot { opacity: 0; visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all ease 0.5s; } .rotate .dot.on { opacity: 1; visibility: visible; } .rotate .cir.on { display: none; } .ho2 .circles { width: 29.688vw; margin-left: 3.646vw; position: relative; } .ho2 .circles::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 46.875vw; height: 46.875vw; border: 1px dashed #bfc4c7; border-radius: 50%; } .circles .num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: 90%; text-align: center; } .circles .num span { font-size: 6.51vw; font-family: "Gotham"; font-weight: bold; color: #ffffff; } .circles .circle { width: 100%; height: 29.688vw; top: 0; left: 0; border-radius: 50%; overflow: hidden; pointer-events: none; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .circle-main { position: relative; background: linear-gradient(-45deg, rgba(0, 145, 219, 0.5), rgba(0, 117, 193, 1)) !important; z-index: 5; } .circle-first, .circle-second, .circle-third { position: absolute; background: #a0d9f6; z-index: 2; } .circle-first { opacity: 0.15; -webkit-animation: firstCircle 10s ease infinite; animation: firstCircle 10s ease infinite; } .circle-second { opacity: 0.15; -webkit-animation: secondCircle 10s ease infinite; animation: secondCircle 10s ease infinite; } .circle-third { opacity: 0.15; -webkit-animation: thirdCircle 10s ease infinite; animation: thirdCircle 10s ease infinite; } .ho2 .intr { width: 35%; } .ho2 .intr .ev { width: 100%; margin: 0.781vw 0; } .ho2 .intr h5 { font-size: 1.35vw; font-weight: 600; color: #007fcb; cursor: pointer; opacity: 0.4; } .ho2 .intr p { font-size: 0.838vw; font-weight: 400; line-height: 1.5; color: #646464; display: none; } .ho2 .ev.on h5 { font-size: 1.867vw; opacity: 1; } .e_html-37.s_list .circles { width: 40vw; height: 40vw; } .e_html-37.s_list .circle.circle-main { width: 40vw; height: 40vw; } .e_html-37.s_list .circle.circle-first { width: 40vw; height: 40vw; } .e_html-37.s_list .circle.circle-second { width: 40vw; height: 40vw; } .e_html-37.s_list .circle.circle-third { width: 40vw; height: 40vw; } .e_html-37.s_list .circle-first { background: #0067a0; opacity: 0.1; } .e_html-37.s_list .circle-second { background: #0067a0; opacity: 0.1; } .e_html-37.s_list .circle-third { background: #0067a0; opacity: 0.1; } .e_html-40.s_list .circles { width: 50vw; height: 50vw; } .e_html-40.s_list .circle.circle-main { width: 40vw; height: 40vw; } .e_html-40.s_list .circle.circle-first { width: 40vw; height: 40vw; } .e_html-40.s_list .circle.circle-second { width: 40vw; height: 40vw; } .e_html-40.s_list .circle.circle-third { width: 40vw; height: 40vw; } .e_html-40.s_list .circle-first { background: #0067a0; opacity: 0.1; } .e_html-40.s_list .circle-second { background: #0067a0; opacity: 0.1; } .e_html-40.s_list .circle-third { background: #0067a0; opacity: 0.1; } .e_html-24.s_list .circles { width: 50vw; height: 50vw; } .e_html-24.s_list .circle.circle-main { width: 50vw; height: 50vw; } .e_html-24.s_list .circle.circle-first { width: 50vw; height: 50vw; } .e_html-24.s_list .circle.circle-second { width: 50vw; height: 50vw; } .e_html-24.s_list .circle.circle-third { width: 50vw; height: 50vw; } .e_html-28.s_list .circle-first { background: #9ed7f5; opacity: 0.1; } .e_html-24.s_list .circle-second { background: #a0d9f6; opacity: 0.1; } .e_html-24.s_list .circle-third { background: #a0d9f6; opacity: 0.1; }