时间戳

首页 > 解决方案 > 悬停效果动画有问题

javascript - 悬停效果动画有问题

问题描述

您好，我对 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, #1D2671, #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);
    }
}

标签： javascripthtmlcsshover

解决方案

它在你身上出现了故障，因为你悬停的元素也是触发器，它的动画远离你的鼠标。我已经设置了一个示例，显示将鼠标悬停在静止元素上会顺利触发动画。根据我的经验，使用静止元素作为动画触发器是使用: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, #1D2671, #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>

推荐阅读