<div fragment="circleMenu" >
|
<link rel="stylesheet" type="text/css" href="css/page/circle-menu.css"/>
|
<style>
|
.circle-menu {
|
position: fixed;
|
right: 0;
|
top: 50%;
|
z-index: 9999;
|
width: 180px;
|
height: 360px;
|
margin-top: -180px;
|
}
|
.circle-menu #menu {
|
position: absolute;
|
left: -70px;
|
top: -70px;
|
display: block;
|
width: 500px;
|
height: 500px;
|
border-radius: 50%;
|
overflow: visible;
|
}
|
.item .sector {
|
fill: #141c25;
|
stroke: #00abfc;
|
stroke-width: 2;
|
transition: all 0.1s linear;
|
}
|
.item:hover .sector {
|
fill: #1b293a;
|
}
|
.menu-trigger {
|
pointer-events: auto;
|
-webkit-transform: translate(50px);
|
transform: translate(50px);
|
transition: -webkit-transform 0.3s ease-in-out;
|
transition: transform 0.3s ease-in-out;
|
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
|
}
|
.menu-trigger:hover,
|
.menu-trigger.active {
|
-webkit-transform: translate(0);
|
transform: translate(0);
|
}
|
.item,
|
.menu-trigger:hover {
|
cursor: pointer;
|
}
|
.menu-trigger circle {
|
-webkit-transform-origin: 250px 250px;
|
transform-origin: 250px 250px;
|
}
|
.menu-trigger circle:hover,
|
.menu-trigger.active circle {
|
-webkit-animation: rotate 4s linear infinite;
|
animation: rotate 4s linear infinite;
|
}
|
.menu-trigger circle:hover:nth-child(1),
|
.menu-trigger.active circle:nth-child(1) {
|
animation: rotate 4s linear infinite reverse;
|
}
|
.item use,
|
.item text {
|
fill: #00abfc;
|
}
|
.item text {
|
font-size: 18px;
|
font-weight: 500;
|
}
|
@-webkit-keyframes rotate {
|
0% {
|
-webkit-transform: rotate(0deg);
|
transform: rotate(0deg);
|
}
|
100% {
|
-webkit-transform: rotate(360deg);
|
transform: rotate(360deg);
|
}
|
}
|
@keyframes rotate {
|
0% {
|
-webkit-transform: rotate(0deg);
|
transform: rotate(0deg);
|
}
|
100% {
|
-webkit-transform: rotate(360deg);
|
transform: rotate(360deg);
|
}
|
}
|
</style>
|
<div class="circle-menu">
|
<svg id="menu" viewBox="-100 -100 700 700" xmlns:xlink="http://www.w3.org/1999/xlink">
|
<defs>
|
<!-- 这里的width、height都是相对的比例，所以1也代表100% -->
|
<pattern height="1" id="e" patternContentUnits="objectBoundingBox" width="1">
|
<!-- 这里的width、height是相对图片的真实大小，数字越大，显示的区域越小 -->
|
<image height="1" preserveAspectRatio="none" href="images/float-circle-wrap.png" width="1" xlink:href="images/float-circle-wrap.png" xmlns:xlink="http://www.w3.org/1999/xlink" />
|
</pattern>
|
<pattern height="1" id="f" patternContentUnits="objectBoundingBox" width="1">
|
<image height="1" preserveAspectRatio="none" href="images/float-circle-solid.png" width="1" xlink:href="images/float-circle-solid.png" xmlns:xlink="http://www.w3.org/1999/xlink" />
|
</pattern>
|
</defs>
|
<g id="symbols">
|
<symbol id="a" viewBox="0 0 29 29">
|
<g fill="none" fill-rule="evenodd">
|
<path d="M.807.085h28v28h-28z" />
|
<g fill="#15E1FA" fill-rule="nonzero">
|
<path d="M26.882 2.718l-.14-.587-.587-.143c-.336-.082-.946-.177-1.958-.177-1.914 0-4.317.35-6.423.935-1.154.32-2.185.697-3.062 1.12-.908.438-1.65.933-2.147 1.43-.454.455-1.047 1.354-1.766 2.675-.167.306-.34.635-.517.985-1.457.415-3.191 1.44-3.924 1.903-1.662 1.041-3.01 2.132-3.601 2.914a.986.986 0 0 0 .432 1.513c.183.07.383.145.593.227.957.363 2.128.803 3.036 1.25l-.003.005 5.266 5.272c.446.91.892 2.089 1.258 3.054l.227.593a.982.982 0 0 0 1.512.432c.782-.59 1.873-1.938 2.915-3.601.46-.736 1.485-2.464 1.906-3.924.355-.18.692-.355 1.003-.525 1.33-.722 2.229-1.318 2.677-1.772 1.285-1.285 2.423-4.044 3.046-7.38.271-1.454.424-2.934.43-4.164.008-1.047-.088-1.685-.173-2.035zM8.814 12.051a125.179 125.179 0 0 0-1.247 2.885 32.39 32.39 0 0 0-2.234-.941c.527-.432 1.227-.94 2.072-1.468.553-.348 1.1-.66 1.611-.92a16.61 16.61 0 0 0-.202.444zm7.51 9.42a20.907 20.907 0 0 1-1.467 2.072 32.88 32.88 0 0 0-.938-2.23c.845-.354 1.848-.783 2.9-1.256.143-.066.285-.128.425-.191a23.038 23.038 0 0 1-.92 1.605zM25.09 4.739c-.006 1.118-.145 2.472-.397 3.815-.273 1.46-.662 2.835-1.126 3.984-.432 1.069-.922 1.91-1.379 2.365l-.005.005c-.11.112-.596.544-2.22 1.428-1.061.574-2.39 1.222-3.954 1.927-1.29.58-2.51 1.094-3.44 1.48l-3.434-3.446c.382-.932.9-2.154 1.476-3.44.708-1.572 1.356-2.9 1.925-3.95.878-1.614 1.315-2.109 1.427-2.221.337-.336.908-.708 1.611-1.047.771-.372 1.69-.708 2.732-.996 1.944-.544 4.148-.866 5.895-.866.353 0 .634.013.859.032.019.241.032.547.03.93zM5.87 20.615c-1.069 0-1.971.708-2.264 1.684L2.58 25.695a.474.474 0 0 0 .588.59l3.39-1.03a2.374 2.374 0 0 0 1.68-2.27c0-1.31-1.059-2.37-2.366-2.37z" />
|
<path d="M17.07 11.795a1.75 1.75 0 1 0 2.475-2.475 1.75 1.75 0 0 0-2.475 2.475z" />
|
</g>
|
</g>
|
</symbol>
|
<symbol id="b" viewBox="0 0 29 29">
|
<g fill="none" fill-rule="evenodd">
|
<path d="M.295.617h28v28h-28z" />
|
<path d="M26.326 5.367l-5.012-2.883a.874.874 0 0 0-.864 0l-5.012 2.883a.867.867 0 0 0-.432.751v.244l-.277-.159a.874.874 0 0 0-.864 0l-.279.162v-.247a.873.873 0 0 0-.434-.751L8.137 2.484a.874.874 0 0 0-.864 0L2.26 5.367a.864.864 0 0 0-.435.751v5.786c0 .31.164.596.435.752l5.012 2.882a.866.866 0 0 0 .864 0l.279-.16v.245c0 .31.166.596.434.752l.178.101-.178.101a.87.87 0 0 0-.434.752v5.786c0 .31.166.596.434.752l5.013 2.882a.874.874 0 0 0 .864 0l5.012-2.882a.87.87 0 0 0 .434-.752v-5.783a.873.873 0 0 0-.434-.752l-.178-.101.178-.101a.87.87 0 0 0 .434-.752v-.243l.277.158a.874.874 0 0 0 .864 0l5.012-2.885a.872.872 0 0 0 .437-.752V6.118a.866.866 0 0 0-.437-.751zM7.705 13.515l-3.91-2.248V6.756l3.91-2.248 3.91 2.248v.74L8.85 9.087a.87.87 0 0 0-.434.751v3.27l-.711.408zm3.91-4.566v2.321l-1.942 1.116v-2.322l1.942-1.115zm6.59 9.02v4.512l-3.91 2.248-3.91-2.248v-4.512l.617-.355 2.86 1.643a.874.874 0 0 0 .865 0l2.86-1.643.618.355zm-5.94-1.083l2.03-1.167 2.028 1.167-2.028 1.168-2.03-1.168zm6.65-1.487l-.615.355-3.573-2.053a.874.874 0 0 0-.864 0l-3.574 2.053-.616-.355v-.744l3.476-1.999a.87.87 0 0 0 .435-.752V7.817l.713-.41.709.407v4.093a.87.87 0 0 0 .432.752l3.478 1.999v.74zm0-3.013l-1.94-1.119V8.943l1.94 1.118v2.325zm5.88-1.119l-3.913 2.248-.709-.405V9.837a.87.87 0 0 0-.432-.752l-2.767-1.591v-.738l3.91-2.248 3.91 2.248v4.511z" fill="#15E1FA" fill-rule="nonzero" />
|
</g>
|
</symbol>
|
<symbol id="c" viewBox="0 0 29 29">
|
<path d="M14.549 11.125a3.485 3.485 0 0 0-2.729 1.017 3.489 3.489 0 0 0-1.017 2.73l-2.696 5.93 5.93-2.696a3.485 3.485 0 0 0 2.73-1.017 3.489 3.489 0 0 0 1.017-2.73l2.696-5.93-5.931 2.696zm.828 4.575a1.53 1.53 0 0 1-2.165 0 1.53 1.53 0 0 1 0-2.166 1.53 1.53 0 0 1 2.165 0 1.53 1.53 0 0 1 0 2.166zM14.295.617c-7.733 0-14 6.267-14 14s6.267 14 14 14c7.732 0 14-6.267 14-14s-6.268-14-14-14zm0 26.031c-6.645 0-12.032-5.387-12.032-12.031 0-6.645 5.387-12.031 12.032-12.031 6.644 0 12.03 5.386 12.03 12.03 0 6.645-5.386 12.032-12.03 12.032z" fill="#15E1FA" fill-rule="nonzero" />
|
</symbol>
|
<symbol id="d" viewBox="0 0 29 29">
|
<path d="M14.624.05c-7.732 0-14 6.267-14 14s6.268 14 14 14c7.733 0 14-6.267 14-14s-6.267-14-14-14zm8.507 22.507a11.969 11.969 0 0 1-3.825 2.578 11.916 11.916 0 0 1-4.682.947c-1.624 0-3.199-.318-4.68-.944a12.044 12.044 0 0 1-3.826-2.578 11.969 11.969 0 0 1-2.579-3.826 11.939 11.939 0 0 1-.946-4.684c0-1.624.317-3.199.943-4.681a12.044 12.044 0 0 1 2.579-3.825A11.969 11.969 0 0 1 9.94 2.965a11.939 11.939 0 0 1 4.684-.946c1.625 0 3.2.317 4.682.943a12.044 12.044 0 0 1 3.825 2.579 11.969 11.969 0 0 1 2.579 3.825c.628 1.485.946 3.06.946 4.684a11.962 11.962 0 0 1-3.525 8.507zm-2.464-8.725H15.61V7.269a.984.984 0 1 0-1.969 0v6.563c0 1.088.88 1.968 1.969 1.968h5.058a.984.984 0 1 0 0-1.968z" fill="#15E1FA" fill-rule="nonzero" />
|
</symbol>
|
</g>
|
<g data-svg-origin="250 250" id="items" transform="rotate(-90 250 250)">
|
<a class="item update" data-svg-origin="250 250" style="transform:matrix(0,0,0,0,250,250)">
|
<path class="sector" d="M350 250h150a250 250 0 0 0-73.223-176.777L320.71 179.29A100 100 0 0 1 350 250" />
|
<use height="40" transform="rotate(157.5 414.45 181.882)" width="40" x="366.451" xlink:href="#a" y="166.882" />
|
<text transform="rotate(148.5 414.45 181.882)" x="414.451" y="190.882">更新</text>
|
</a>
|
<a class="item passthrough" data-svg-origin="250 250" style="transform:matrix(0,0,0,0,250,250)">
|
<path class="sector" d="M350 250h150a250 250 0 0 0-73.223-176.777L320.71 179.29A100 100 0 0 1 350 250" fill="none" />
|
<use height="40" transform="rotate(67.5 414.45 181.882)" width="40" x="394.451" xlink:href="#b" y="135.882" />
|
<text transform="rotate(174.5 414.45 181.882)" x="414.451" y="190.882">透传</text>
|
</a>
|
<a class="item action" data-svg-origin="250 250" style="transform:matrix(0,0,0,0,250,250)">
|
<path class="sector" d="M350 250h150a250 250 0 0 0-73.223-176.777L320.71 179.29A100 100 0 0 1 350 250" fill="none" />
|
<use height="40" transform="rotate(67.5 414.45 181.882)" width="40" x="394.451" xlink:href="#c" y="135.882" />
|
<text transform="rotate(145 414.45 181.882)" x="416.451" y="184.882">操作</text>
|
</a>
|
<a class="item timing" data-svg-origin="250 250" style="transform:matrix(0,0,0,0,250,250)">
|
<path class="sector" d="M350 250h150a250 250 0 0 0-73.223-176.777L320.71 179.29A100 100 0 0 1 350 250" fill="none" />
|
<use height="40" transform="rotate(67.5 414.45 181.882)" width="40" x="394.451" xlink:href="#d" y="135.882" />
|
<text transform="rotate(167.5 414.45 181.882)" x="416.451" y="190.882">定时</text>
|
</a>
|
</g>
|
<g class="menu-trigger">
|
<circle cx="250" cy="250" fill="url(#e)" r="126" />
|
<circle cx="250" cy="250" fill="url(#f)" r="126" />
|
</g>
|
</svg>
|
</div>
|
<script src="plugins/tweenmax@1.16.0/TweenMax.min.js" ></script>
|
</div>
|
