<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="point-area" style="top: 15px; left: 12px; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;"> <p class="point-name" style="position: absolute; top: 45px; left: 65px;">中国</p> <div class="point point-dot"></div> <div class="point point-10"></div> <div class="point point-40"></div> <div class="point point-shadow point-80"></div> </div> <div class="content"> <ul class="clearfix aa"> <li class="active"> <div class="con"> <div class="header1">我是标题</div> <div class="main1"> 111 </div> <div class="main2"> 可弹性伸缩、安全稳定、简单<br> 可弹性伸缩、安全稳定、简单 </div> </div> </li> <li> <div class="con"> <div class="header1">我是标题</div> <div class="main1"> 111 </div> <div class="main2"> 可弹性伸缩、安全稳定、简单<br> 可弹性伸缩、安全稳定、简单 </div> </div> </li> <li> <div class="con"> <div class="header1">我是标题</div> <div class="main1"> 111 </div> <div class="main2"> 可弹性伸缩、安全稳定、简单<br> 可弹性伸缩、安全稳定、简单 </div> </div> </li> <li> <div class="con"> <div class="header1">我是标题</div> <div class="main1"> 111 </div> <div class="main2"> 可弹性伸缩、安全稳定、简单<br> 可弹性伸缩、安全稳定、简单 </div> </div> </li> </ul> </div> <ul class="bb clearfix"> <li> <div class="bb_bg"></div> <div class="bb_con"> <div class="bb_tit">我是标题</div> <div class="bb_line">_</div> <div class="bbb">金融服务</div> <div class="bb_content"> 我是内容<br> 我是内容<br> 我是内容 </div> </div> </li> <li> <div class="bb_bg"></div> <div class="bb_con"> <div class="bb_tit">我是标题</div> <div class="bb_line">_</div> <div class="bbb">金融服务</div> <div class="bb_content"> 我是内容<br> 我是内容<br> 我是内容 </div> </div> </li> <li> <div class="bb_bg"></div> <div class="bb_con"> <div class="bb_tit">我是标题</div> <div class="bb_line">_</div> <div class="bbb">金融服务</div> <div class="bb_content"> 我是内容<br> 我是内容<br> 我是内容 </div> </div> </li> <li> <div class="bb_bg"></div> <div class="bb_con"> <div class="bb_tit">我是标题</div> <div class="bb_line">_</div> <div class="bbb">金融服务</div> <div class="bb_content"> 我是内容<br> 我是内容<br> 我是内容 </div> </div> </li> </ul> <div class="topmove"></div> <!--<div class="tu1"></div>--> <div class="outer"> <div>111</div> <div class="cell-detail">www</div> </div> </body> <script src="jquery-1.11.3.min.js"></script> <script> $(".aa li").on("mouseover",function(){ $(this).addClass("active"); $(this).siblings().removeClass("active"); }); $(".bb li").hover(function(){ $(this).addClass("active"); $(this).siblings().removeClass("active"); },function(){ $(this).removeClass("active"); }) </script> </html>
.point-area { text-align: center; position: relative; width: 150px; height: 150px; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .point-area .point { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 10px; height: 10px; margin: auto; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; background: transparent; } .point-area .point-dot { background-color: #6AD7E9; border: 1px solid rgba(0, 205, 236, 0.37); } .point-area .point-10 { width: 100%; height: 100%; } .point-area .point-10:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 2px solid #00cdec; opacity: 0; -webkit-animation: ripple 4500ms ease-out 225ms infinite; -moz-animation: ripple 4500ms ease-out 225ms infinite; -o-animation: ripple 4500ms ease-out 225ms infinite; animation: ripple 4500ms ease-out 225ms infinite; } .point-area .point-40 { width: 100%; height: 100%; } .point-area .point-40:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 2px solid #00cdec; opacity: 0; -webkit-animation: ripple 4500ms ease-out 900ms infinite; -moz-animation: ripple 4500ms ease-out 900ms infinite; -o-animation: ripple 4500ms ease-out 900ms infinite; animation: ripple 4500ms ease-out 900ms infinite; } .point-area .point-80 { width: 100%; height: 100%; } .point-area .point-80:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 2px solid #00cdec; opacity: 0; -webkit-animation: ripple 4500ms ease-out 1800ms infinite; -moz-animation: ripple 4500ms ease-out 1800ms infinite; -o-animation: ripple 4500ms ease-out 1800ms infinite; animation: ripple 4500ms ease-out 1800ms infinite; } @-webkit-keyframes ripple { 0% { opacity: 0; -webkit-transform: scale(0.1, 0.1); } 5% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1) } } @-moz-keyframes ripple { 0% { opacity: 0; -moz-transform: scale(0.1, 0.1); } 5% { opacity: 1; } 100% { opacity: 0; -moz-transform: scale(1) } } @-o-keyframes ripple { 0% { opacity: 0; -o-transform: scale(0.1, 0.1); } 5% { opacity: 1; } 100% { opacity: 0; -o-transform: scale(1) } } @keyframes ripple { 0% { opacity: 0; -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); } 5% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .clearfix { zoom: 1; } .clearfix:after { content: ""; display: block; width: 0; height: 0; visibility: hidden; clear: both; } .content { width: 1200px; margin: 120px auto 0; height: 200px; } ul { list-style: none; } .aa li { float: left; width: 22%; border: 1px solid #ccc; position: relative; height: 200px; vertical-align: middle; transition: all 0.3s cubic-bezier(0.12, 0, 0.2, 1), z-index 0s 0.12s; z-index: 10 } .header1 { height: 60px; line-height: 60px; background-color: #ccc; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s; position: absolute; top: 0; width: 100%; } .main1, .main2 { position: absolute; top: 60px; left: 0; width: 100%; } .main1 { z-index: 2; opacity: 1; filter: alpha(opacity=100); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100)); transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0s; } .main2 { z-index: 1; opacity: 0; filter: alpha(opacity=0); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0)); transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0.18s; } .aa li.active { width: 32%; border: 1px solid #00c1de; box-shadow: 0 0 20px rgba(0, 198, 226, 0.5); height: 238px; z-index: 100; } .aa li.active .header1 { background-color: #00c1de; height: 100px; top: -40px; } .aa li.active .main1 { z-index: 1; opacity: 0; filter: alpha(opacity=0); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0)); } .aa li.active .main2 { z-index: 2; opacity: 1; filter: alpha(opacity=100); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100)); } .bb { height: 200px; width: 1200px; margin: 60px auto; text-align: center } .bb li { width: 25%; height: 100%; background-color: #CCCCCC; float: left; position: relative; cursor: pointer; transition: all 0.3s; } .bb_bg { width: 100%; height: 100%; transition: all 0.3s; } .bb_line { opacity: 1; margin: 10px; transition: all 0.3s; } .bbb { font-size: 20px; margin: 10px; } .bb_content { opacity: 0; transition: all 0.3s; } .bb_con { height: 120px; position: absolute; top: 60px } .bb li.active .bb_bg { background: rgba(255, 201, 201, 0.2) } .bb li.active .bb_line { opacity: 0; margin: 0; } .bb li.active .bb_content { opacity: 1; } .bb li.active .bb_con { top: 30px; transition: all 0.3s } /*鼠标经过图片旋转*/ .topmove { width: 75px; height: 75px; border: 1px solid #ccc; background: url("../bg1.jpg") no-repeat 0 0; background-size: 75px; -webkit-animation: topMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 1; -moz-animation: topMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 1; -o-animation: topMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 1; animation: topMove 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s 1; } @-webkit-keyframes topMove{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;}} @-moz-keyframes topMove{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;}} @-o-keyframes topMove{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;}} @keyframes topMove{0%{opacity:0;-webkit-transform:translateY(20px);-moz-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}100%{opacity:1;}} .tu1 { width: 75px; height: 75px; border: 1px solid #ccc; background: url("../bg1.jpg") no-repeat 0 0; background-size: 75px; margin-top:20px; } .outer{width:192px;height:187px;border:1px solid #ccc;position:relative} .outer:hover .cell-detail{display:block;} .cell-detail{ position:absolute; width: 192px; left: 1px; height: 187px; top: 50%; margin-top: -94px; border-radius: 0; animation: flipInX 0.7s ease both; display: none; background-color:green; } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0.5; } 40% { transform: perspective(400px) rotateX(-10deg) } 70% { transform: perspective(400px) rotateX(10deg) } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1.0 } }