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

圆形浮动的导航菜单

cjw1231年前 (2024-03-03)网站应用2380 
<!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...

css3设计伪元素实现太极阴阳图并旋转

<style> body{margin:0;} .wrap{ position:relative; width:200px; height:100px; background-color:#fff; margin:50px auto; border-width:...

彩色流转文字代码

<style>#nr { font-size: 15px; margin:  0; background:  -webkit-linear-gradient(left,#ffffff,#ff0000 6.2...

纯CSS实现菜单炫酷点击展开收起效果

通过纯css3实现展开收缩的弹性动画菜单，可以应用于PC端或移动端页面中，非常实用效果也非常的炫酷，喜欢的码友们可以尝试一下，效果如下：完整代码如下：<!doctype html><html><head><meta charset=&qu...

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果，能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转，并且同时绕着一个中心点缠绕旋转。通过巧妙地运用CSS的动画属性和变换属性，你可以实现这个效果。首先，使用CSS创建一个心形图案，可以通过调整元素的宽高、边框、背景色等属性来塑造心形的形状。然后...

谷歌免费网站ico图标接口

分享个免费有用的ico图标的接口，可以使用谷歌提供的友链ico接口读取网址的ico图标，就可以很轻松的实现为网站友情链接增加ico图标。ico图标接口：https://t1.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallbac...

发表评论

访客

看不清，换一张

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

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