jQuery CSS 四叶草菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery四叶草菜单</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(236, 172, 234);
}
.container {
position: relative;
width: 400px;
height: 400px;
}
.button {
position: absolute;
width: 150px;
height: 150px;
background-color: peru;
text-align: center;
line-height: 150px;
font-size: 36px;
color: #fff;
transition: all 0.3s;
}
.button:hover {
box-shadow: 0 0 10px rgb(102, 98, 98);
}
.button.one {
left: 45px;
top: 45px;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
background-color: rgba(255, 95, 96, .85);
}
.button.two {
right: 45px;
top: 45px;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
background-color: rgba(255, 255, 32, .85);
}
.button.three {
left: 45px;
bottom: 45px;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
background-color: rgba(170, 255, 28, .85);
}
.button.four {
right: 45px;
bottom: 45px;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
background-color: rgba(32, 212, 255, .85);
}
.button.one:hover,
.button.two:hover {
top: 35px;
}
.button.three:hover,
.button.four:hover {
bottom: 35px;
}
.button.one:hover,
.button.three:hover {
left: 35px;
}
.button.two:hover,
.button.four:hover {
right: 35px;
}
.click {
border: 3px solid #fff;
border-radius: 50%;
}
.button.one.click {
left: 0px;
top: 0px;
background-color: rgb(255, 55, 55);
}
.button.two.click {
right: 0px;
top: 0px;
background-color: rgb(243, 208, 11);
}
.button.three.click {
left: 0px;
bottom: 0px;
background-color: rgb(81, 255, 28);
}
.button.four.click {
right: 0px;
bottom: 0px;
background-color: rgb(32, 173, 255);
}
</style>
</head>
<body>
<main class="container">
<div data-back-color='rgba(255, 95, 96, .2)' class="button one">医疗</div>
<div data-back-color='rgba(255, 255, 32, .2)' class="button two">饮食</div>
<div data-back-color='rgba(170, 255, 28, .2)' class="button three">健身</div>
<div data-back-color='rgba(32, 212, 255, .2)' class="button four">消费</div>
</main>
<script>
$(".button").on('click', (event) => {
if ($(event.target).hasClass('click')) {
$(event.target).removeClass('click');
} else {
$(".button").removeClass('click');
$(event.target).addClass('click');
$('body').css('background-color',$(event.target).attr('data-back-color'));
}
});
</script>
</body>
</html>