Question

我想知道在动画播放后是否可以更改图像的类或位置。我希望图像在动画播放后向下滑动并停留在该位置，以便您可以单击链接的图像并转到其他页面。我希望动画只播放一次，然后停留在那里吗？有什么可以帮助的吗？

谢谢

<html>
<head>
<meta charset="utf-8">
<title>aidancheung.com</title>
</head>
<style>
	h1 {
		font-family: coolvetica;
		text-align: center;
}
 .bottom {
        position: absolute;
        top: 275px;
    }
    .bottom:hover img {
     position: absolute;
        -webkit-animation: floatBubble 2s  normal ease-out;
        animation: floatBubble 2s normal ease-out;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;

    }
    @-webkit-keyframes floatBubble {
        0% {
            top:275px;
        }
        100% {
            top:500px;
        }
    }
    @keyframes floatBubble {
        0% {
            top:275px;
        }
        100%{
           top: 500px;
        }
    }
	
</style>
<p>This is the content for Layout P Tag</p>
<img src="Website.png" alt="Top Building">
<h1 style="line-height:45px;font-size: 100px;">aidancheung.<br><i style="font-size: 50px">portfolio</i></br></h1>
<p style="line-height: 2px;text-align: center;"><a href="aidancheung.htm"><img src="home.png" width="545" height="45" title="go to home" alt="Flower"></a><br><a href="https://www.google.com/"><img src="portfolio.png" width="545" height="45" title="go to portfolio" alt="Flower"></a></br><br><a href="https://www.google.com/"><img src="about.png" width="545" height="45" title="go to about" alt="Flower"></a></br></p>
<div class="bottom">
<img class="bottom" src="bottom.png" alt="Bottom Building">
</div>
</html>

Answer 1

过渡比较简单，在这里效果很好。当鼠标悬停在其容器上方时，图像将保持隐藏状态。将鼠标移出后，图片将返回其位置。

.bottom {
  position: relative;
  height: 300px;
  width: 300px;
  padding: 40px;
  overflow: hidden;
}

.bottom img {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: top 2s ease-out;
}

.bottom:hover img {
  top: 100%;
}

<div class="bottom">
  <p>Some hidden content, you can put your link here</p>
  <img src="https://placehold.it/300x300" alt="Bottom Building">
</div>

使用CSS播放动画后更改图像位置或类？

1 个答案: