如何使用CSS创建滑入过渡效果？-css教程-PHP中文网

如何使用CSS创建滑入过渡效果？

Linda Hamilton

发布： 2024-12-08 04:25:16

原创

744 人浏览过

How to Create a Slide-In Transition Effect Using CSS?

如何使用 CSS 创建滑入过渡

CSS 提供了多种用于创建滑入过渡的选项，包括 CSS3 过渡和动画。

CSS3 过渡

对于过渡，相关代码看起来像这样this:

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

登录后复制

在此示例中，当鼠标悬停在父元素 (.wrapper) 上时，元素 (#slide) 的位置在 1 秒内从 left: -100px 转换为 0。

CSS3 动画

或者，可以使用动画来实现滑入效果。下面是一个示例：

#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 秒延迟后开始，并在完成时保持结束状态。

注意： 浏览器对这些功能的支持可以查看[这里](http://caniuse.com/)。

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