我有一个关于 CSS 的问题。我编写了一个动画以在悬停时旋转。现在,当我将鼠标悬停在它上面时,它确实出现了很多故障。它只是一次又一次地开始旋转。有人可以帮忙吗。代码在这里:
#text {
width: 300px;
height: 150px;
background-color: lightgray;
border-left: 0px groove;
border-top: 0px groove;
border-radius: 10px;
margin: auto;
padding: 5px;
transition: all 0.3s ease-in;
}
#text:hover {
border-left: 10px groove;
border-top: 10px groove;
background-color: lightskyblue;
transform: rotateY(360deg);
}
#text::after {
content: "Hover me";
font-size: 30px;
margin-left: 100px;
color: black;
}
#text:hover::after {
content: "If you want to know how to get started as a web developer, take a look at my youtube channel";
margin: 0;
font-size: 20px;
}
<div id="text">
</div>
答案 0 :(得分:0)
正如 Paulie_D 正确所述,您的 :hover
会触发动画,但会在您的鼠标离开 #text
元素时终止动画。所以它重置了。
有多种方法可以解决这个问题,比如这个例子来制作一个不移动但只触发动画的新容器元素。
.text {
width: 100%;
height: 150px;
background-color: lightgray;
border-left: 0px groove;
border-top: 0px groove;
border-radius: 10px;
padding: 5px;
transition: all 0.3s ease-in;
margin-bottom: 20px;
}
.animated-card {
margin: auto;
width: 300px;
}
.animated-card:hover > .text {
transform: rotateY(360deg);
}
.text:hover {
border-left: 10px groove;
border-top: 10px groove;
background-color: lightskyblue;
}
.text::after {
content: "Hover me";
font-size: 30px;
margin-left: 100px;
color: black;
}
.text:hover::after {
content: "If you want to know how to get started as a web developer, take a look at my youtube channel";
margin: 0;
font-size: 20px;
}
<div class="animated-card">
<div id="text"></div>
</div>
<div class="animated-card">
<div class="text"></div>
</div>
<div class="animated-card">
<div class="text"></div>
</div>
<div class="animated-card">
<div class="text"></div>
</div>