!DOCTYPEhtml htmllang="en" head metacharset="UTF-8" metaname="viewport"content="width=device-width,initial-scale=1.0" metahttp-equiv="X-UA-Compatible"content="ie=edge" title转盘/title style /*导航外层div设为圆形*/ html,body{ width
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>转盘</title> <style> /*导航外层div设为圆形*/ html, body{ width: 100%; height: 100%; background: #0c376f; overflow: hidden; } .css-transforms .menu-wrapper { overflow: hidden; zoom: 1.3; position: absolute; width: 460px; height: 460px; /*margin: 90px auto 0;*/ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: transparent; pointer-events: auto; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
/*覆盖a标签的内侧靠近圆心的部分, 避免鼠标点击事件*/ /*.css-transforms .menu-wrapper:after{*/ /*color: transparent;*/ /*content:".";*/ /*display:block;*/ /*position: absolute;*/ /*z-index:10;*/ /*left: 50%;*/ /*top:50%;*/ /*margin-left: -150px;*/ /*margin-top: -150px;*/ /*width: 300px;*/ /*height: 300px;*/ /*-webkit-border-radius: 50%;*/ /*-moz-border-radius: 50%;*/ /*border-radius: 50%;*/ /*background-image: url("../RFImages/中间圆.png");*/ /*background-size:100%*/ /*}*/ .css-transforms .menu-wrapper li { position: absolute; top: -70px; left: -70px; overflow: hidden; width: 300px; height: 300px; transform-origin: 100% 100%; pointer-events: none; }
/*a标签反倾斜角度为-(90-x),旋转角度为-x,x为我们想要的圆心角,在这个demo里,有3个列表项,半圆,得出圆心角为60*/ .css-transforms .menu-wrapper li a { position: absolute; right: -200px; bottom: -200px; display: block; width: 420px; height: 420px; border-radius: 50%; color: #fff; text-align: center; text-decoration: none; /*先斜切后旋转,不可颠倒*/ transform: skew(-40deg) rotate(-66deg) scale(1); pointer-events: auto; }
/*列表项倾斜角度为90-x,每个列表项的旋转角度依次间隔 >60 */ .css-transforms .menu-wrapper li:first-child { transform: rotate(0deg) skew(39deg); } .css-transforms .menu-wrapper li:nth-child(2) { transform: rotate(51deg) skew(39deg); } .css-transforms .menu-wrapper li:nth-child(3) { transform: rotate(102deg) skew(39deg); } .css-transforms .menu-wrapper li:nth-child(4) { transform: rotate(153deg) skew(39deg); } .css-transforms .menu-wrapper li:nth-child(5) { transform: rotate(205deg) skew(39deg); } .css-transforms .menu-wrapper li:nth-child(6) { transform: rotate(256deg) skew(39deg); } .css-transforms .menu-wrapper li:nth-child(7) { transform: rotate(307deg) skew(39deg);
} /*.css-transforms .menu-wrapper li:nth-child(8) {*/ /*transform: rotate(361deg) skew(45deg);*/ /*}*/ .css-transforms .menu-wrapper li:first-child img { width: 200px; top: -8px; left: 1px; } .css-transforms .menu-wrapper li:nth-child(7) img{ width: 200px; top: -8px; left: 7px;
} img { transform: rotate(0deg) skew(0deg); position: relative; top: -5px; left: 3px; width: 193px; }
.menu-wrapper{ animation: rot_test 60s infinite linear; } .menu-wrapper:hover{ animation-play-state: paused !important; } @keyframes rot_test{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
.centerImage{ color: transparent; content:"."; display:block; position: absolute; z-index:10; /*left: 50%;*/ /*top:50%;*/ /*margin-left: -193px;*/ /*margin-top: -198px;*/ width: 390px; height: 390px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; /*background-image: url("../RFImages/中间圆.png");*/ background-image: url("../RFImages/中心.png"); background-size:100%; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
.welcome{ background: url(../RFImages/background2.png); background-size: 100% 100%; width: 100%; height: 100%; } .backContBtn{ width: 117px; height: 96px; background: url(../../caseCenter/images/backsix.png); position: absolute; right: 3%; top: 5%; } .backContBtn:hover{ cursor: pointer; }</style> </head> <body> <div class="css-transforms" id="box"> <div class="menu-wrapper"> <menu-wrapperul> <li><a class="first"><img src="./img/ajgc.png" alt="无法显示图片" onclick="></a></li> <li><a class="first"><img src="./img/sla.png" alt="无法显示图片"></a></li> <li><a class="first"><img src="./img/zfcs.png" alt="无法显示图片"></a></li> <li><a class="first"><img src="./img/sacw.png" alt="无法显示图片"></a></li> <li><a class="first"><img src="./img/wja.png" alt="无法显示图片"></a></li> <li><a class="first"><img src="./img/ajgc.png" alt="无法显示图片"></a></li> <li><a class="first"><img src="./img/zfkp.png" alt="无法显示图片"></a></li> </menu-wrapperul> </div> </div> </body> </html>