CSS滑動

一、CSS滑動效果

CSS滑動效果是指通過CSS屬性調整，讓頁面元素有滑動的效果，常見的CSS屬性有transition、transform、opacity等。

舉個例子，通過CSS實現一個圖片在滑鼠懸浮時有淡出效果：

/* CSS代碼 */
.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.fade-out:hover {
  opacity: 0.5;
}

二、CSS滑動門

CSS滑動門是指通過CSS實現的一種導航條，點擊導航按鈕可以切換不同內容。常見的實現方式是通過偽類和絕對定位實現。

下面是一個簡單的示例：

<ul id="nav">
  <li class="active"><a href="#">Nav1</a></li>
  <li><a href="#">Nav2</a></li>
  <li><a href="#">Nav3</a></li>
</ul>

/* CSS代碼 */
#nav li {
  position: relative;
}
#nav li a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50px;
  background-color: #f2f2f2;
  transition: background-color 0.5s ease;
}
#nav li.active a,
#nav li:hover a {
  background-color: #666;
  color: #fff;
}
#nav li a:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 0;
  height: 50px;
  background-color: #666;
  transition: width 0.5s ease;
}
#nav li.active a:before,
#nav li:hover a:before {
  width: 100%;
}

三、CSS滑動按鍵

CSS滑動按鍵是指通過CSS實現一種按鍵，滑鼠點擊時會有滑動效果。常見的實現方式是通過偽類和transform屬性實現。

下面是一個簡單的示例：

<div id="button">Click me!</div>

/* CSS代碼 */
#button {
  padding: 15px 30px;
  background-color: #666;
  color: #fff;
  cursor: pointer;
  transition: transform 0.5s ease;
}
#button:hover {
  transform: translateX(10px);
}

四、CSS滑動門效果

CSS滑動門效果是指通過CSS實現的一種頁面效果，常見的實現方式是通過絕對定位和過渡實現。下面是一個簡單的示例：

<div id="slider">
  <ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
  </ul>
</div>

/* CSS代碼 */
#slider {
  position: relative;
  height: 200px;
  overflow: hidden;
}
#slider ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.5s ease;
}
#slider li {
  flex-basis: 33.33%;
  text-align: center;
  line-height: 200px;
  color: #fff;
}
#slider li:nth-child(1) {
  background-color: #666;
}
#slider li:nth-child(2) {
  background-color: #999;
}
#slider li:nth-child(3) {
  background-color: #ccc;
}
#slider.active ul {
  transform: translateX(-100%);
}

五、CSS滑動門技術

CSS滑動門技術是指通過CSS實現的一種頁面效果，常見的實現方式是通過絕對定位和過渡實現。下面是一個簡單的示例：

/* CSS代碼 */
.sliding-door {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.sliding-door .panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #666;
  transition: transform 0.5s ease;
}
.sliding-door .panel:nth-child(2) {
  background-color: #999;
  transform: translateX(-100%);
}
.sliding-door:hover .panel:nth-child(1) {
  transform: translateX(100%);
}
.sliding-door:hover .panel:nth-child(2) {
  transform: none;
}

六、CSS滑動門導航

CSS滑動門導航是指通過CSS實現的一種導航效果，常見的實現方式是通過絕對定位和過渡實現。下面是一個簡單的示例：

<ul id="nav">
  <li class="active"><a href="#">Nav1</a></li>
  <li><a href="#">Nav2</a></li>
  <li><a href="#">Nav3</a></li>
  <li class="slider"></li>
</ul>

/* CSS代碼 */
#nav {
  position: relative;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
#nav li {
  position: relative;
  flex-basis: 25%;
  text-align: center;
}
#nav li a {
  display: block;
  height: 50px;
  line-height: 50px;
  background-color: #f2f2f2;
  transition: background-color 0.5s ease;
}
#nav li.active a,
#nav li:hover a {
  background-color: #666;
  color: #fff;
}
#nav li.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background-color: #666;
  transition: transform 0.5s ease;
}
#nav li:nth-child(2).active ~ .slider {
  transform: translateX(25%);
}
#nav li:nth-child(3).active ~ .slider {
  transform: translateX(50%);
}
#nav li:nth-child(4).active ~ .slider {
  transform: translateX(75%);
}

七、CSS滑動動畫

CSS滑動動畫是指通過CSS實現的一種動畫效果，常見的實現方式是通過關鍵幀動畫實現。下面是一個簡單的示例：

<div id="box"></div>

/* CSS代碼 */
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
#box {
  width: 200px;
  height: 200px;
  background-color: #666;
  animation: slidein 1s ease-in-out forwards;
}

八、CSS滑動菜單

CSS滑動菜單是指通過CSS實現的一種菜單效果，常見的實現方式是通過transform屬性和過渡實現。下面是一個簡單的示例：

<nav id="menu">
  <ul>
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
  </ul>
</nav>

/* CSS代碼 */
#menu {
  position: fixed;
  top: 0;
  left: -200px;
  width: 200px;
  height: 100%;
  background-color: #f2f2f2;
  transition: transform 0.5s ease;
}
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu li {
  padding: 10px;
}
#menu li a {
  display: block;
  color: #333;
}
#menu.active {
  transform: translateX(200px);
}

九、CSS滑動條針形

CSS滑動條針形是指通過CSS實現的一種滑動條效果，常見的實現方式是通過偽類和過渡實現。下面是一個簡單的示例：

<input type="range" value="50">

/* CSS代碼 */
input[type="range"] {
  width: 100%;
  margin: 10px 0;
  -webkit-appearance: none;
  background-color: #f2f2f2;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #666;
  transition: width 0.5s ease;
}
input[type="range"]:hover::-webkit-slider-thumb {
  width: 20px;
}

十、CSS滑動隱藏滾動條

CSS滑動隱藏滾動條是指通過CSS實現的一種隱藏滾動條的效果，常見的實現方式是通過overflow屬性和偽類實現。下面是一個簡單的示例：

<div id="scroll">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt diam non tortor mollis, vitae luctus urna malesuada.</p>
    <p>Mauris id dolor eu sapien aliquet fringilla non eu ipsum. Quisque feugiat felis et augue placerat commodo.</p>
    <p>Sed rhoncus lectus ut leo maximus finibus. Nam eget augue a nisi aliquet eleifend.</p>
    <p>Etiam volutpat lorem vel nibh iaculis, ac tincidunt nisl dignissim. Sed aliquet non mi non pretium.</p>
    <p>Aliquam sed urna sed enim laoreet pulvinar vitae nec tortor. Lorem ipsum dolor sit amet.</p>
  </div>
</div>

/* CSS代碼 */
#scroll {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
#scroll::-webkit-scrollbar {
  width: 0px;
}
#scroll .content {
  padding-right: 10px;
}
#scroll .content::-webkit-scrollbar {
  width: 5px;
  background-color: #f2f2f2;
}
#scroll .content::-webkit-scrollbar-thumb {
  background-color: #666;
}