我正在尝试通过纯CSS使某些效果爆炸和内爆。问题是，当我将鼠标悬停在按钮上并运行效果时，它也会更改其他元素的位置。看起来好乱我可以解决吗？我在链接自爆
上的代码笔上创建了一支笔html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li> <a href="" class="explode">Explode</a></li>
<li> <a href="" class="implode">Implode</a></li>
</ul>
</body>
</html>
css
@keyframes explode {
0% {
height:120px;
width:120px;
opacity: 0.1;
border:5px solid skyblue;
border-radius: 50%;
margin-left:30%;
margin-top:0;
}
50% {
height:170px;
width:170px;
opacity:0.5;
border:5px solid skyblue;
}
100% {
height:220px;
width:220px;
margin-left:0%;
margin-top:-25%;
opacity:0;
border:5px solid skyblue;
border-radius: 50%;
}
}
@keyframes border-radius-mine {
0%{
border-radius:5px;
}
100%{
border-radius: 50%;
background-color:skyblue;
color:white;
}
}
@keyframes kBorderColor {
from {
border-color: skyblue
}
to {
border-color: coral;
}
}
ul {
list-style: none;
padding:50px;
border:1px solid red;
position:initial;
overflow:hidden;
}
li {
display:inline-block;
background-color: white;
width:200px;
min-height:200px;
height:auto;
padding:5px;
text-align:center;
line-height:45px;
font-size:20px;
position:relative;
box-sizing: border-box;
margin:50px;
}
li a {
display:inline-block;
text-decoration: none;
width:200px;
}
.explode {
border:2px solid skyblue;
color: skyblue;
border-radius:5px;
}
.explode:hover {
height:100px;
width:100px;
padding-top:25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
animation: border-radius-mine 0.3s linear;
animation-fill-mode: forwards;
}
.explode:hover:after {
content: "";
height: 120px;
width:120px;
position:absolute;
top:-10px;
left:-20px;
display:inline-block;
animation: explode 0.3s linear;
animation-fill-mode: forwards;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
/*implode by just animation reverse reverse */
@keyframes implode {
0% {
height:220px;
width:220px;
margin-left:-40%;
margin-top:-40%;
opacity:0;
border:5px solid skyblue;
border-radius: 50%;
}
50% {
height:170px;
width:170px;
margin-left:-20%;
margin-top:-20%;
opacity:0.5;
border:5px solid skyblue;
border-radius: 50%;
}
100% {
height:120px;
width:120px;
margin-left:3px;
margin-top:3px;
opacity: 1;
border:5px solid skyblue;
border-radius: 50%;
}
}
@keyframes border-radius-in-out {
0% {
border-radius:5px;
transform:scale(1,1);
margin-left:20px;
}
25% {
transform:scale(0.7,0.7);
}
50% {
transform:scale(0,0);
}
50% {
transform:scale(0.7,0.7);
}
100% {
border-radius:50%;
transform:scale(1,1);
background-color:skyblue;
color:white;
margin-left:20px;
margin-top:-20px;
}
}
.implode {
border:2px solid skyblue;
color: skyblue;
border-radius:5px;
}
.implode:hover {
height:100px;
width:100px;
padding-top:25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
animation: border-radius-in-out 0.3s ease-in forwards ;
}
.implode:hover:after {
content: "";
height: 120px;
width:120px;
position:absolute;
top:-20px;
left:-20px;
display:inline-block;
animation: implode 0.3s ease-in-out, kBorderColor 3s linear forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
/*effect in out */
.implode:hover:before {
content: "";
height: 140px;
width:140px;
position:absolute;
top:-20px;
left:-20px;
display:inline-block;
animation: implode 0.3s;
animation-fill-mode: forwards;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
这个想法是，方形按钮在悬停时会变成圆形，并且其边框会在悬停时爆炸或爆炸。