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

圆形浮动的导航菜单

cjw1231年前 (2024-03-03)网站应用2460

<!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实现批量生成18位身份证号码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title&g...

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

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

CSS心形缠绕转动效果

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

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服，方便意向客户的联系，网上随便一搜也会有很多代码提供，但是大多都是JS书写的，并且夹带着一些图片素材乱七八糟的东西，用起来很不方便。今天我们就教给大家一个纯css书写的在线客服效果首先我们有如下html结构<div class=&quo...

开灯！关灯！

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...

追求完美-BLOG

圆形浮动的导航菜单

相关文章

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

js实现批量生成18位身份证号码

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

CSS心形缠绕转动效果

纯CSS实现侧边栏浮动在线客服效果

开灯！关灯！

发表评论

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

追求完美-BLOG

圆形浮动的导航菜单

相关文章

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

js实现批量生成18位身份证号码

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

CSS心形缠绕转动效果

纯CSS实现侧边栏浮动在线客服效果

开灯！关灯！

发表评论取消回复

发表评论