.map-title { padding: 4.6rem 0 2rem; text-align: center; position: relative; } .map-title h2 { font-size: 2.1rem; color: #333; margin-bottom: 0.3rem; } .map-title h3 { font-size: 0.9rem; color: #aaa; } .map-title p { font-size: 0.8rem; color: #999; width: 29%; margin: 0 auto; line-height: 1.8; } .map-list { position: relative; width: 100%; height: 100%; } .map-list .tu img { width: 100%; } .map-list .tu ul { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .map-list .tu ul li{ position: absolute; left: 9%; top: 19%; } .map-list .tu ul li h4 { position: absolute; left: 1.4rem; top: -0.2rem; white-space: nowrap; font-size: 0.9rem; color: #fff0; padding: 0.4rem 0.2rem; border-radius: 6px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; overflow: hidden; width: 0px; } .map-list .tu ul li h4 span { position: relative; } .map-list .tu ul li h4 a { display: block; position: relative; color: #333; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .map-list .tu ul li h4:before { content: ''; width: 0%; height: 100%; background: #15853dc7; background-size: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } /* .map-list .tu ul li .dian { position: absolute; bottom: -0.6rem; left: 0.5rem; } */ .map-list .tu ul li .dian .point { display: block; width: 0.5rem; height: 0.5rem; background: #fff; opacity: 1; border-radius: 100%; position: relative; z-index: 3; } .map-list .tu ul li .dian .span1 { display: block; width: 1.5rem; height: 1.5rem; background: #15853d; opacity: 1; border-radius: 100%; position: absolute; top: -0.5rem; left: -0.5rem; z-index: 2; } .map-list .tu ul li .dian .span2 { display: block; width: 3.5rem; height:3.5rem; background: #15853d; opacity: 1; border-radius: 100%; position: absolute; top: -1.5rem; left: -1.5rem; z-index: 1; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: linear; -webkit-animation-timing-function: linear; } .map-list .tu ul li .sign { width: 100%; width: 80px; height: auto; filter: opacity(1%); } .map-list .tu ul li:hover .sign{ filter: opacity(80%); width: 80px; height: auto; transition: all .36s .4s; } .map-list .tu ul li:hover h4 span{ color: #fff; transition: all .36s .4s; } .map-list .tu ul li:nth-child(2) { left: 16%; top: 6%; } .map-list .tu ul li:nth-child(3) { left: 18%; top: 55%; } .map-list .tu ul li:nth-child(4) { left: 25%; top: 70%; } .map-list .tu ul li:nth-child(5) { left: 88%; top: 30%; } .map-list .tu ul li:nth-child(5) h4 { left: auto; right: 1.4rem; } .map-list .tu ul li:nth-child(5):hover h4 { left: auto; right: 2rem; } .map-list .tu ul li:nth-child(6) { left: 73.3%; top: 58%; } .map-list .tu ul li:nth-child(6) h4 { left: 1.4rem; right: auto; } .map-list .tu ul li:nth-child(6):hover h4 { left: 2rem; right: auto; } .map-list .tu ul li:nth-child(7) { left: 75%; top: 75.5%; } .map-list .tu ul li:nth-child(7) h4 { left: 1.4rem; right: auto; } .map-list .tu ul li:nth-child(7):hover h4 { left: 2rem; right: auto; } .map-list .tu ul li.active .sign { animation-name: bounce; animation-iteration-count: infinite; transform-origin: center bottom; animation-duration: 1.5s; animation-fill-mode: both; } .map-list .tu ul li:hover h4 { color: #fff; left: 2rem; width: 270px; padding: 0.4rem 1rem; transition: .5s; } .map-list .tu ul li:hover h4 a { color: #fff; } .map-list .tu ul li:hover h4:before { opacity: 1; width: 100%; } .map-list .company-list { display: none; } @-webkit-keyframes pulsed { 0% { transform: scale(0.1); opacity: 0 } 20% { opacity: 1 } 75% { transform: scale(1); opacity: 0 } 100% { opacity: 0 } } @keyframes pulsed { 0% { transform: scale(0.1); opacity: 0 } 20% { opacity: 1 } 75% { transform: scale(1); opacity: 0 } 100% { opacity: 0 } } .pulsed { -webkit-animation-name: pulsed; animation-name: pulsed; } .animated { -webkit-animation-duration: 800ms; animation-duration: 800ms; }