html+css+javascript圆形导航栏炫酷动态效果
制作炫酷圆形导航栏
该效果适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
<html>
<head>
<meta charset="utf-8">
<title>Circletitle>
<style>
html, body {
height: 100%;
}
body {
background: beige;
font-family: Alegreya Sans, sans-serif;
}
nav {
display: block;
position: fixed;
width: 500px;
height: 500px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: translate3d(25px, -25px, 0);
transform: translate3d(25px, -25px, 0);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
}
nav.open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
nav.top-right {
top: -140px;
right: -140px;
}
.disc {
position: absolute;
display: inline-block;
text-align: center;
cursor: pointer;
font: 25px Alegreya Sans, sans-serif;
line-height: 40px;
padding-top: 10px;
border-radius: 250px;
-webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
pointer-events: none;
opacity: 0;
cursor: pointer;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s;
transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
}
.disc div {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.open .disc {
pointer-events: auto;
opacity: 1;
}
.l1 {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: tomato;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.open .l1 {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l1:hover {
background: #1a0a07;
color: tomato;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.open .l1:active {
background: #803224;
color: tomato;
}
.open .l1.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.l2 {
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
background: #ff7a39;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.open .l2 {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l2:hover {
background: #1a0c06;
color: #ff7a39;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.open .l2:active {
background: #803d1d;
color: #ff7a39;
}
.open .l2.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.l3 {
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
background: #ff912b;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.open .l3 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l3:hover {
background: #1a0f04;
color: #ff912b;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.open .l3:active {
background: #804916;
color: #ff912b;
}
.open .l3.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.l4 {
top: 150px;
left: 150px;
right: 150px;
bottom: 150px;
background: #ffa91c;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.open .l4 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l4:hover {
background: #1a1103;
color: #ffa91c;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.open .l4:active {
background: #80550e;
color: #ffa91c;
}
.open .l4.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.l5 {
top: 200px;
left: 200px;
right: 200px;
bottom: 200px;
background: #ffc00e;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.open .l5 {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
opacity: 1;
}
.open .l5:hover {
background: #1a1301;
color: #ffc00e;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.open .l5:active {
background: #806007;
color: #ffc00e;
}
.open .l5.toggle {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
.toggle {
line-height: 100px;
padding: 0;
width: 100px;
background: gold;
opacity: 1;
-webkit-transform: none;
transform: none;
pointer-events: auto;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.open .toggle {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
.toggle:hover {
background: #1a1600;
color: gold;
}
.toggle:active {
background: #806c00;
color: rgba(255, 215, 0, 0.5);
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
style>
head>
<body>
<nav class="top-right">
<a class="disc l1">
<div>Messagesdiv>
a>
<a class="disc l2">
<div>Photosdiv>
a>
<a class="disc l3">
<div>Profilediv>
a>
<a class="disc l4">
<div>Likesdiv>
a>
<a class="disc l5 toggle">
Menu
a>
nav>
<script>
toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Menu';
toggle_close_text = 'Close';
toggle.addEventListener('click', function() {
nav.classList.toggle('open');
if (nav.classList.contains('open')) {
toggle.innerHTML = toggle_close_text;
} else {
toggle.innerHTML = toggle_open_text;
}
}, false);
script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
div>
body>
html>
效果展示：
没有单击之前的效果
点击之后的效果
阅读更多
三连博主，每天分享一个编程小技巧！