纯CSS实现按钮开关滑动特效

最新推荐文章于 2024-07-25 09:00:00 发布

小卿玖

最新推荐文章于 2024-07-25 09:00:00 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_48957210/article/details/127047102

版权

实现如图效果,按钮左右滑动

代码如下:

<template>
  <div class="container">
    <div class="rate_tip">
      <span class="slider" :class="{ activeds: isRateActive == 'month' }">111</span>
      <span
        style="z-index: 66"
        :class="{ actived: isRateActive == 'week' }"
        @click="isRateActive = 'week'"
        >按周</span
      >
      <span
        style="z-index: 66"
        :class="{ actived: isRateActive == 'month' }"
        @click="isRateActive = 'month'"
        >按月</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const isRateActive = ref('')
</script>

<style scoped lang="scss">
.rate_tip {
  position: absolute;
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 2px 2px;
  background-color: rgba(32, 16, 128, 0.76);
  filter: brightness(90%);
  span {
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
    padding: 2px 24px;
    color: #fff;
  }
  .slider {
    color: #fff;
    transition: all 0.5s;
    border-radius: 20px;
    display: inline-block;
    padding: 2px 24px;
    position: absolute;
    background-color: rgb(245, 244, 244);
  }
  .actived {
    color: #2e045f;
    border-radius: 20px;
    z-index: 99;
    font-weight: 600;
  }
  .activeds {
    margin-left: 75px;
  }
}
</style>