CSS 金属样式开关按钮

特创数字科技

于 2024-02-22 21:51:27 发布

阅读量719

点赞数 12

CC 4.0 BY-SA版权

分类专栏： CSS动画文章标签： css 前端 javascript 动画 css3

本文链接：https://blog.csdn.net/weixin_54226053/article/details/136243885

CSS动画专栏收录该内容

74 篇文章

订阅专栏

本文将详细介绍如何使用CSS3实现一款具有金属质感的开关按钮，包括其结构布局、样式设置和交互动画效果。通过此教程，开发者可以学习到CSS3的边框阴影、渐变、伪类及过渡等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<!-- 定义一个视图容器，用于展示具有动态效果的开关按钮组件 -->
	<view class="loader">
		<!-- 开关按钮容器，点击时触发toggleSwitch方法 -->
		<view class="toggle-border" @click="toggleSwitch">
			<!-- 开关标签，其背景颜色随isChecked状态变化 -->
			<label for="one" :style="{ backgroundColor: isChecked ? '#13d162' : '#d13613' }">
				<!-- 开关手柄，其位置随isChecked状态变化 -->
				<view class="handle" :style="{ left: isChecked ? 'calc(100% - 35px + 10px)' : '-10px' }"></view>
			</label>
		</view>
	</view>
</template>

<script>
	export default {
		// 数据对象，包含isChecked属性，用于记录开关状态
		data() {
			return {
				isChecked: false,
			}
		},

		// 页面加载完成后执行的生命周期钩子函数
		onLoad() {
			// 可以在此处添加页面初始化或加载时的操作
		},

		// 方法集合，用于处理各种用户交互事件
		methods: {
			// 切换开关状态的方法，点击时调用
			toggleSwitch() {
				// 反转isChecked的值
				this.isChecked = !this.isChecked;
			}
		}
	}
</script>

<style>
	/* 设置整个应用的全局背景颜色 */
	body {
		background-color: #212121;
	}

	/* 定义装载器样式，用于居中显示开关按钮组件 */
	.loader {
		margin-top: 350px;
		margin-left: 45%;
	}

	/* 开关按钮容器的基本样式设定 */
	.toggle-border {
		width: 65px;
		border: 2px solid #f0ebeb;
		border-radius: 130px;
		margin-bottom: 45px;
		padding: 1px 2px;
		background: linear-gradient(to bottom right, white, rgba(220, 220, 220, 0.5)), white;
		box-shadow: 0 0 0 2px #fbfbfb;
		cursor: pointer;
		display: flex;
		align-items: center;
	}


	/* 开关标签样式设定，其背景颜色会跟随isChecked状态动态变化 */
	.toggle-border label {
		position: relative;
		display: inline-block;
		width: 65px;
		height: 20px;
		border-radius: 80px;
		cursor: pointer;
		box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.3);
		transition: background 0.5s;
	}

	/* 开关手柄样式设定，其位置会跟随isChecked状态动态变化 */
	.handle {
		position: absolute;
		top: -8px;
		left: -10px;
		width: 35px;
		height: 35px;
		border: 1px solid #e5e5e5;
		background: repeating-radial-gradient(circle at 50% 50%, rgba(200, 200, 200, 0.2) 0%, rgba(200, 200, 200, 0.2) 2%, transparent 2%, transparent 3%, rgba(200, 200, 200, 0.2) 3%, transparent 3%), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver 70%, white 80%, silver 95%, white 100%);
		border-radius: 50%;
		box-shadow: 3px 5px 10px 0 rgba(0, 0, 0, 0.4);
		transition: left 0.4s;
	}
</style>