当前位置 : 主页 > 网页制作 > css >

css3--转盘

来源:互联网 收集:自由互联 发布时间:2021-06-13
!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>
网友评论