从屏幕外动画一个div,没有绝对位置,可以通过CSS动画和过渡效果来实现。以下是一个示例代码:
HTML代码:
<div class="container">
<div class="animated-div"></div>
</div>
CSS代码:
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.animated-div {
position: relative;
width: 100px;
height: 100px;
background-color: #f00;
animation: slide-in 1s forwards;
}
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
解释:
这样,当页面加载时,div元素将从屏幕外左侧滑动进入屏幕内。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云