纯CSS3圆形主菜单展开特效-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3圆形主菜单展开特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
font-family: 'Arial', sans-serif;
overflow: hidden;
}

.menu-container {
position: relative;
width: 100px;
height: 100px;
}

/* 主菜单按钮 */
.menu-toggle {
position: absolute;
width: 80px;
height: 80px;
background: #ff4757;
border-radius: 50%;
top: 10px;
left: 10px;
z-index: 100;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
transition: transform 0.5s, background 0.3s;
}

.menu-toggle:hover {
background: #ff6b81;
}

.menu-toggle::before {
content: '+';
color: white;
font-size: 40px;
font-weight: bold;
transition: transform 0.5s;
}

/* 菜单项 */
.menu-item {
position: absolute;
width: 60px;
height: 60px;
background: #3742fa;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
box-shadow: 0 3px 10px rgba(55, 66, 250, 0.3);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: translate(0, 0);
opacity: 0;
z-index: 99;
cursor: pointer;
}

.menu-item:hover {
background: #5352ed;
transform: scale(1.1) !important;
}

/* 复选框控制展开状态 */
#menu-check {
display: none;
}

/* 展开状态样式 */
#menu-check:checked + .menu-toggle {
transform: rotate(45deg);
background: #ff6348;
}

#menu-check:checked + .menu-toggle + .menu-item:nth-child(3) {
transform: translate(-100px, 0);
opacity: 1;
transition-delay: 0.1s;
}

#menu-check:checked + .menu-toggle + .menu-item:nth-child(4) {
transform: translate(-70px, -70px);
opacity: 1;
transition-delay: 0.2s;
}

#menu-check:checked + .menu-toggle + .menu-item:nth-child(5) {
transform: translate(0, -100px);
opacity: 1;
transition-delay: 0.3s;
}

#menu-check:checked + .menu-toggle + .menu-item:nth-child(6) {
transform: translate(70px, -70px);
opacity: 1;
transition-delay: 0.4s;
}

#menu-check:checked + .menu-toggle + .menu-item:nth-child(7) {
transform: translate(100px, 0);
opacity: 1;
transition-delay: 0.5s;
}

/* 菜单项图标 */
.menu-item i {
pointer-events: none;
}

/* 标题样式 */
.title {
position: fixed;
top: 20px;
color: #333;
font-size: 28px;
font-weight: bold;
text-align: center;
}

/* 引用链接 */
.credit {
position: fixed;
bottom: 20px;
color: #666;
font-size: 14px;
}

.credit a {
color: #ff4757;
text-decoration: none;
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div class="title">纯CSS3圆形主菜单展开特效</div>

<div class="menu-container">
<input type="checkbox" id="menu-check">
<label for="menu-check" class="menu-toggle"></label>

<div class="menu-item">
<i class="fas fa-home"></i>
</div>
<div class="menu-item">
<i class="fas fa-user"></i>
</div>
<div class="menu-item">
<i class="fas fa-envelope"></i>
</div>
<div class="menu-item">
<i class="fas fa-cog"></i>
</div>
<div class="menu-item">
<i class="fas fa-image"></i>
</div>
</div>

</body>
</html>