<!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> dial </ title>
<style>
/ * Set navigation circular outer 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;
}
/ * Close to the label inside cover a portion of the center to avoid the mouse click event * /
/*.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 / intermediate circle .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 label anti-tilt angle - (90-x), rotation angle -x, x is the central angle we want, in this demo, there are three list items, semi-circular, draw a central angle of 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;
/ * After the first rotation miter, can not be reversed * /
transform: skew(-40deg) rotate(-66deg) scale(1);
pointer-events: auto;
}
/ * List item inclination angle 90-x, rotation angle intervals are sequentially each list item> 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 / intermediate circle .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>