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

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

代码如下:

<template><div class="container"><div class="rate_tip"><span class="slider" :class="{ activeds: isRateActive == 'month' }">111</span><spanstyle="z-index: 66":class="{ actived: isRateActive == 'week' }"@click="isRateActive = 'week'">按周</span><spanstyle="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>

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

一分钟实现纯CSS全屏滚动特效
一分钟实现纯CSS全屏滚动特效 Hello World [你好世界]-Hello World-"无论世界多么崩坏,我都只想再见到她的笑颜" 端午节快乐! 会用到的CSS属性 bac ...
82.纯CSS液体加载特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 82]纯CSS液体加载特效视频地址一:https://www.ixigua.c ...
纯CSS实现的滑动的可折叠菜单
纯CSS实现的二级纵向下拉菜单,可以滑动折叠,无需JavaScript代码,兼容性好查看演示页面 View Demo查看全部代码 View Code 下载: 点击这里下载网页代码及演示图片在网页& ...
纯css制作遮罩层特效
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做.下面是用纯css制作的遮罩层效果: 原始页面,放了三张图片: ...
纯css阴阳旋转js特效代码
下载https://yy123.ink/frontDetail/4629下载纯css阴阳旋转特效代码 dd:
纯css和html光芒特效,纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
html代码 html代码结构很简单,跟之前那篇文章使用的相同: 复制代码代码如下: webhek 最外面的div作为父元素,它的position是relative,有固定的高和宽度,有两个子元素:一 ...
纯css和html光芒特效,科技常识：纯CSS3实现给头像加个光芒四射且旋转的背景动画效果...
今天小编跟大家讲解下有关纯CSS3实现给头像加个光芒四射且旋转的背景动画效果 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关纯CSS3实现给头像加个光芒四射且旋转的背景动画效果的相关资料 ...
纯CSS3手风琴图片滑动特效
要求必备知识基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器演示地址演示地址制作CSS3制作手风琴图片滑动效果,我们仅 ...
纯javascript轮播滑动特效插件Swiper
Swiper 的每个展示块(屏)为一个slide,slide中放置图片或文字等展示的内容,全部slide排成一行(或多行)包含在包装器wrapper中,而总容器container 又包裹着wrappe ...

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

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

最新文章

热门文章