如何解决悬停效果动画出现故障
你好,我对css和html很陌生,试图用关键帧制作css悬停效果只是一个简单的动画,不幸的是,当我试图悬停动画时,一切都变得混乱了,所以我只是我想知道如何解决此问题时悬停时的动画有点故障,所以我想我需要等到动画结束后再悬停。请帮我。这是我的CSS代码
body{
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right,#1D2671,#C33764); /* Chrome 10-25,Safari 5.1-6 */
background: linear-gradient(to right,#C33764); /* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}
.title{
font-size: 80px;
font-family: 'Passion One',cursive;
color:white;
letter-spacing: 10px;
text-shadow: 1px 1px 11px black;
position: fixed;
top: 50%;
left: 30%;
margin-top:-50px;
margin-left: -100px;
}
.title:hover{
animation-name: GoUp;
animation-duration: 1s;
}
@keyframes GoUp{
from{
transform: translateY(180px);
}
to{
transform: translateY(-180px);
}
}
解决方法
它之所以会出现故障,是因为您将鼠标悬停在也是触发点的元素上,并且动画远离了您的鼠标。我已经建立了一个示例,显示将鼠标悬停在固定元素上会平滑触发动画。以我的经验,在使用:hover
时,将固定元素用作动画触发器是最简单的方法。
body{
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right,#1D2671,#C33764); /* Chrome 10-25,Safari 5.1-6 */
background: linear-gradient(to right,#C33764); /* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
}
.title{
font-size: 80px;
font-family: 'Passion One',cursive;
color:white;
letter-spacing: 10px;
text-shadow: 1px 1px 11px black;
position: fixed;
top: 50%;
left: 30%;
margin-top:-50px;
margin-left: -100px;
}
.hover-me {
color: green;
font-family: sans-serif;
background-color: white;
display: inline-block;
padding: 0.5rem 1.4rem;
}
body:hover .title {
animation-name: GoUp;
animation-duration: 1s;
}
@keyframes GoUp{
from{
transform: translateY(180px);
}
to{
transform: translateY(-180px);
}
}
<p class="hover-me">HOVER OVER ME</p>
<div class="title">
HERE IS A TITLE
</div>
,
将光标移到光标上方时要举升的标题已消失。这个事实会立即停止动画,因为悬停规则不再有效。标头返回其位置。然后,重复这些动作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。