如何仅使用 CSS 构建跨浏览器滑入效果？

如何仅使用 CSS 创建跨浏览器滑入过渡

使用 CSS，您可以无缝创建滑入的元素从左开始，没有 JavaScript。这种多功能性可以通过 CSS3 过渡或 CSS3 动画来实现。

CSS 过渡

例如，您可以实现悬停触发的过渡：

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

在这种情况下，将鼠标悬停在 .wrapper 上将从左侧滑动#slide：-100px；向左：0； 1 秒内。

CSS 动画

或者，您可以使用动画来自动实现滑入效果：

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

这种方法遵循相同的滑动机制，但它会在 2 秒后自动开始动画。动画填充模式：向前；属性确保 div 在动画完成后保持可见。

有关 CSS 动画和过渡的更多信息，请参阅以下资源：

• 动画：https://developer。 mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• 过渡： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

以上是如何仅使用 CSS 构建跨浏览器滑入效果？的详细内容。更多信息请关注PHP中文网其他相关文章！