CSS中的滑动门效果可以让网页看起来更加美观，让按钮、导航栏等元素具备交互性和动态性。

/* CSS代码 */.btn {display: inline-block;padding: 10px 20px;background: #ccc;border: 1px solid #888;color: #333;text-decoration: none;position: relative;overflow: hidden;}.btn:before {content: "";position: absolute;left: -100%;top: 0;width: 100%;height: 100%;background: #f00;z-index: -1;transition: left 0.3s ease;}.btn:hover:before {left: 0;}

上述代码实现了一个简单的按钮滑动门效果，首先需要将按钮块级元素变成行内块级元素。然后，通过在按钮的前面添加一个伪元素，设置其宽度和高度等于按钮的宽高，再将z-index属性设置为-1，这是为了将伪元素放在后面。

接下来，将伪元素的left属性设置为-100%，这样伪元素就位于按钮左侧。当鼠标悬停在按钮上方时，通过:hover伪类将伪元素的left属性设为0，即可实现伪元素从左侧滑动到按钮的效果，同时按钮的背景色也被覆盖了。