<!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{
100%;
height: 100%;
background: #0c376f;
overflow: hidden;
}
.css-transforms .menu-wrapper {
overflow: hidden;
zoom: 1.3;
position: absolute;
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;*/
/* 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;
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;
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 {
200px;
top: -8px;
left: 1px;
}
.css-transforms .menu-wrapper li:nth-child(7) img{
200px;
top: -8px;
left: 7px;
}
img {
transform: rotate(0deg) skew(0deg);
position: relative;
top: -5px;
left: 3px;
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;*/
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%;
100%;
height: 100%;
}
.backContBtn{
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>