使用HTML和CSS创建等距按钮悬停效果！！附源码！！

yycvip · 发表于昨天 21:55

效果展示

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<ul>
<li style="--clr:#e44d26">
HTML5
</li>
<li style="--clr:#264de4">
CSS3
</li>
<li style="--clr:#f0db4f">
JavaScript
</li>
</ul>
<script src="https://kit.fontawesome.com/9e5ba2e3f5.js" crossorigin="anonymous"></script>
</body>
</html>

复制代码

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-content: center;
background-color: rgb(11, 5, 28);
font-family: "Popins", sans-serif;
}
ul {
list-style: none;
width: 800px;
display: flex;
align-items: center;
justify-content: space-between;
}
ul li {
position: relative;
display: grid;
place-items: center;
width: 200px;
height: 200px;
}
li .base {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
border: 8px solid var(--clr);
border-left: 8px solid transparent;
animation: spin 8s linear infinite;
filter: drop-shadow(0 0 10px var(--clr));
}
li .base::after {
content: "";
position: absolute;
top: 9px;
left: 9px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--clr);
}
li .base,
li .title,
li .icon {
position: absolute;
color: #b5b5b5;
transform: rotateX(60deg) rotateZ(-45deg);
cursor: pointer;
transition: .5s ease-in-out;
}
li .title {
font-size: 28px;
font-weight: 700;
letter-spacing: 2px;
transform: rotateY(30deg) skewY(-24deg) translateY(0px);
opacity: 0;
pointer-events: none;
}
li .icon {
display: grid;
place-items: center;
font-size: 80px;
height: 100%;
pointer-events: none;
}
.base:hover {
filter: drop-shadow(0 0 10px var(--clr));
animation-play-state: paused;
}
.base:hover + .title + .icon {
transform: rotateY(30deg) skewY(-24deg) translateY(-160px);
color: var(--clr);
filter: drop-shadow(0 0 3px var(--clr));
animation: wave 1s ease-in-out infinite;
}
.base:hover+.title {
color: va(--clr);
transform: rotateY(30deg) skewY(-24deg) translateY(-90px);
text-shadow: 0 0 3px var(--clr);
transition-delay: 0.1s;
opacity: 1;
animation: wave 1s ease-in-out infinite;
}
@keyframes spin {
0% {
transform: rotateX(60deg) rotateZ(0);
}
100% {
transform: rotateX(60deg) rotateZ(-360deg);
}
}
@keyframes wave {
0%,
100% {
margin-bottom: 0;
}
50% {
margin-bottom: 15px;
}
}

复制代码

9e5ba2e3f5.js (13.2 KB, 下载次数: 0)

		自动登录	找回密码
密码			立即注册