当前位置：首页 > 网站应用 > 正文内容

圆形浮动的导航菜单

cjw1232个月前 (03-03)网站应用360 
<!doctype html>    
<html>    
<head>    
<meta charset="utf-8">    
<title>圆型概念导航</title>    
<style>    
@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans:800,900");    
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>Messages</div>    
	</a>    
	<a class="disc l2">    
		<div>Photos</div>    
	</a>    
	<a class="disc l3">    
		<div>Profile</div>    
	</a>    
	<a class="disc l4">    
		<div>Likes</div>    
	</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>    
</body>    
</html>


扫描二维码推送至手机访问。

版权声明：本文由追求完美发布，如需转载请注明出处。

本文链接：https://cjw123.com/blog/?id=73

分享给朋友：
返回列表

上一篇：好看的网站自适应图片文字广告位代码

下一篇：js+css3文字闪光滑过动画特效

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型，可以规定meta标签所在的html页面是否被蜘蛛抓取，下面是这个meta标签的用法，大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

js报表双击固定样式，用于对比

在很多报表中，需要鼠标上下选择时显示对比颜色，在双击时显示固定的色表示选中状态。<table style="width:80%" border=1 onmouseover="getrow(this)" onmous...

js弹出居中窗口特效

<html> <head> <title>弹出窗口效果</title> <style> .black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;...

js实现第一次访问站时点击任何地方都先弹出一个广告页

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...

纯css实现弹出图层背景变灰特效

<style> .bg{position:absolute;z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height...

div+css+js实现菜单的收缩与展开，适合问答

<html> <head> <title>div+css+js实现菜单的收缩与展开</title> <meta http-equiv="Content-Type" content="text...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright © 2007 追求完美. Rights Reserved.
湘ICP备16005041号-3