首页 > web前端 > css教程 > 如何仅使用 CSS 构建跨浏览器滑入效果?

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

Barbara Streisand
发布: 2024-12-08 16:33:11
原创
826 人浏览过

How to Build a Cross-Browser Slide-In Effect Using Only 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板