.slideCon_bg>div { float: left; box-sizing: border-box; } .firstPos1{ width: 400px; position: absolute; right: 250px; top: 0px; padding-right: 150px; width: 650px !important; } .slide_left, .slide_right { width: 25%; } .slide_middle { width: 50%; } .slide_middle_first{ width: 100%; height: 1500px; padding-top: 200px; } .orderStatistic>.orderCon_middle { padding-top: 420px; } .orderStatistic>.orderCon_left { box-sizing: border-box; padding-left: 480px; } .orderStatistic>div>ul li { height: 240px; width: 470px; background: url(../img/num_frame.png) no-repeat center; background-size: 100%; } .slideCon_bg>div>ul li img { width: 160px; height:160px; padding-left: 20px; padding-top: 40px; display: inline-block; vertical-align: middle; } .slideCon_bg>div>ul li .num_word { display: inline-block; vertical-align: middle; font-size: 36px; color: #02d0ee; margin-top: 40px; } .slideCon_bg>div>ul li .num_word span{ /*margin-top: 30px;*/ } .slideCon_bg>div>ul li .num_word span:nth-of-type(2) { color: #fff; margin-right: 20px; } .slideCon_bg>div>ul li .num_word span:nth-of-type(3) { color: #fdcf2f; font-size: 72px; } /*雷达样式开始*/ .radar { /*background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);*/ background: -webkit-radial-gradient(center, rgba(3, 248, 255, 0.5) 0%, rgba(32, 255, 77, 0) 5%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 0%, rgba(32, 255, 77, 0) 23%, #00f9ff 23.6%, rgba(32, 255, 77, 0) 23.9%); ; /*background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);*/ background: radial-gradient(center, rgba(3, 248, 255, 0.5) 0%, rgba(32, 255, 77, 0) 5%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 23%, #20ff4d 23.6%, rgba(32, 255, 77, 0) 23.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%); width: 1200px; height: 1200px; max-height: 1200px; max-width: 1200px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 0.2rem solid #01f8ff; box-shadow: 0 0 70px #01f8ff; overflow: hidden; } .radar_inner { width: 100%; height: 100%; } .radar_inner::before, .radar_inner::after { content: ' '; display: block; position: absolute; width: 100%; height: 4%; background: url(../img/heng_line.png) no-repeat center; top: 50%; left: 0; background-size: cover; margin-top: -2%; } .radar_inner::after { transform: rotate(90deg); } .radar:before { content: ' '; display: block; position: absolute; border-radius: 50%; /*animation: blips 5s infinite;*/ width: 100%; height: 4%; animation-timing-function: linear; animation-delay: 1.4s; } .radar:after { content: ' '; display: block; background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00f9ff 100%); width: 50%; height: 50%; position: absolute; top: 0; left: 0; animation: radar-beam 5s infinite; animation-timing-function: linear; transform-origin: bottom right; border-radius: 100% 0 0 0; } @keyframes radar-beam { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*波点出现消失动画开始*/ @keyframes blips { /*14% { background: linear-gradient(0deg, transparent 24%, rgba(140, 147, 166, 0.51) 25%, rgba(140, 147, 166, 0.51) 26%, transparent 27%, transparent 74%, rgba(140, 147, 166, 0.51) 75%, rgba(140, 147, 166, 0.51) 76%, transparent 77%, transparent); } 14.0002% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); } 25% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); } 26% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); opacity: 1; } 100% { background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); opacity: 0; }*/ 0% { box-shadow: 0px 0 3px 8px #1f6cb9; } 30% { box-shadow: 0 0 3px 4px #1f6cb9; } 70% { box-shadow: 0 0 3px 6px #1f6cb9; } 100% { /*box-shadow: 0 0 35px rgba(24, 61, 101, 0.81);*/ box-shadow: 0px 0 3px 8px #1f6cb9; } } /*波点出现消失动画结束*/ #radarBox { width: 1300px; height: 1300px; max-height: 1300px; max-width: 1300px; margin: 0 auto; border-radius: 50%; position: relative; background: url(../img/waihuan.png) no-repeat; background-size: contain; } /*雷达样式结束*/ .map_bg { background: url(../img/map.png) no-repeat center; background-size: 65%; height: 1200px; position: relative; } @keyframes OutOpcity { 0% { opacity: 1; } 20% { opacity: 0.8; } 40% { opacity: 0.5; } 65% { opacity: 0.2; } 100% { opacity: 0; } } @-webkit-keyframes OutOpcity { 0% { opacity: 1; } 20% { opacity: 0.8; } 40% { opacity: 0.5; } 65% { opacity: 0.2; } 100% { opacity: 0; } } .OutOpcity { -webkit-animation-name: OutOpcity; animation-name: OutOpcity /*animation: 10s infinite OutOpcity ease; -webkit-animation: 10s infinite OutOpcity ease;*/ } @keyframes showTxt { 0% { opacity: 0; } 40% { opacity: 0.5; } 65% { opacity: 0.8; } 100% { opacity: 1; } } @-webkit-keyframes showTxt { 0% { opacity: 0; } 40% { opacity: 0.5; } 65% { opacity: 0.8; } 100% { opacity: 1; } } .showTxt { -webkit-animation-name: showTxt; animation-name: showTxt } .quanbg { width: 160px; height: 160px; border-radius: 50%; position: relative; cursor: pointer; } .quanbg .quan { width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; box-sizing: border-box; display: inline-block; } .quanbg .quan1 { border: 1px solid #eb972c; opacity: 0.08; margin: 0%; width: 100%; height: 100%; } .quanbg .quan2 { border: 1px solid #eb972c; opacity: 0.2; margin: 13%; width: 74%; height: 74%; } .quanbg .quan3 { border: 1px solid #eb972c; opacity: 0.5; margin: 28%; width: 44%; height: 44%; } .quanbg .quan4 { background: #eb972c; margin: 42%; width: 16%; height: 16%; box-shadow: 0 0 60px rgba(255, 255, 255, 0.83); } .quanbg .quan1b { opacity: 0; } .quanbg .quan2b { opacity: 0; } .quanbg .quan3b { opacity: 0; } .quanbg .quan1a { animation: 3s infinite animation2_quan1 ease; -webkit-animation: 3s infinite animation2_quan1 ease; } .quanbg .quan2a { animation: 3s infinite animation2_quan2 ease; -webkit-animation: 3s infinite animation2_quan2 ease; } .quanbg .quan3a { animation: 3s infinite animation2_quan3 ease; -webkit-animation: 3s infinite animation2_quan3 ease; } .quanbg .quan1b { animation: 3s 1.5s infinite animation2_quan1 ease; -webkit-animation: 3s 1.5s infinite animation2_quan1 ease; } .quanbg .quan2b { animation: 3s 1.5s infinite animation2_quan2 ease; -webkit-animation: 3s 1.5s infinite animation2_quan2 ease; } .quanbg .quan3b { animation: 3s 1.5s infinite animation2_quan3 ease; -webkit-animation: 3s 1.5s infinite animation2_quan3 ease; } .quanbg .quan4 { animation: 1.5s infinite animation2_quan4 ease-out; -webkit-animation: 1.5s infinite animation2_quan4 ease-out; } .quanbg:hover .quan1a { animation: 2s infinite animation2_quan1a ease; -webkit-animation: 2s infinite animation2_quan1a ease; } @keyframes animation2_quan1 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 60% { opacity: 0.08; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @-webkit-keyframes animation2_quan1 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 60% { opacity: 0.08; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @keyframes animation2_quan2 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 40% { opacity: 0.2; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @-webkit-keyframes animation2_quan2 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 40% { opacity: 0.2; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @keyframes animation2_quan3 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 20% { opacity: 0.5; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @-webkit-keyframes animation2_quan3 { 0% { transform: scale(0.8); opacity: 0; -webkit-transform: scale(0.8); } 20% { opacity: 0.5; } 80% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } 100% { transform: scale(1); opacity: 0; -webkit-transform: scale(1); } } @keyframes animation2_quan4 { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0.2); } 30% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.2); } } @-webkit-keyframes animation2_quan4 { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0.2); } 30% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.2); } } .quanbgBox { position: absolute; } .quan_SYQ { /* 睢阳区*/ top: 40%; left: 41%; } .quan_MQ { /* 民权*/ top: 10%; left: 26%; } .quan_SX { /* 睢县*/ top: 32%; left: 21%; } .quan_NL { /* 宁陵*/ top: 25%; left: 32%; } .quan_LYQ { /* 梁园区*/ top: 27%; left: 40%; } .quan_KFQ { /* 开发区*/ top: 33%; left: 46%; } .quan_ZC { /* 柘城*/ top: 56%; left: 30%; } .quan_YCX { /* 虞城*/ top: 29%; left: 52%; } .quan_XYX { /*夏邑县*/ top: 48%; left: 60%; } .quan_YCS { /*永城市*/ top: 67%; left: 69%; } .txt { color: #FFF; font-size: 32px; width: 200px; display: inline-block; text-align: right; position: absolute; right: 88%; } .txt_SYQ { /* 睢阳区*/ right: 36%; bottom: -14%; } .txt_MQ { /* 民权*/ top: 67%; right: 20%; } .txt_SX { /* 睢县*/ top: 65%; right: 32%; } .txt_NL { /* 宁陵*/ top: 68%; right: 32%; } .txt_LYQ { /* 梁园区*/ top: 62%; right: 22%; } .txt_KFQ { /* 开发区*/ top: 59%; right: 16%; } .txt_ZC { /* 柘城*/ top: 64%; right: 19%; } .txt_YCX { /* 虞城*/ top: 67%; right: 15%; } .txt_XYX { /* 夏邑县*/ top: 73%; right: 15%; } .txt_YCS { /*永城市*/ top: 30%; right: 77%; }