CSS 伸缩动画输入框

特创数字科技

于 2024-02-24 00:46:48 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

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

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

CSS动画专栏收录该内容

74 篇文章

订阅专栏

本文详细介绍了如何使用CSS3的transform和transition属性创建一个具有伸缩效果的动画输入框，通过改变输入框的宽度和边框，实现平滑的动画过渡效果，提升用户体验。

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

<template>
	<!-- 定义一个视图容器，其中包含一个输入框、提示文字及一个底部线条动画 -->
	<view class="box">
		<view class="inputbox">
			<!-- 创建一个文本输入框，并在点击时触发input事件 -->
			<input type="text" @click="input">
			<!-- 动态显示用户名提示文字，位置和颜色随isclcha状态变化 -->
			<text 
				:style="{ 
					transform: isclcha ? 'translateX(0px) translateY(-34px)' : 'translateX(0px) translateY(0px)', 
					color: isclcha ? '#45f3ff' : '#8f8f8f' 
				}">用户名</text>
			<!-- 创建一个用于实现动画效果的伪元素，高度随isclcha状态变化 -->
			<i :style="{ height: isclcha ? '44px' : '2px' }"></i>
		</view>
	</view>
</template>

<script>
	export default {
		// 定义组件的数据对象，初始设置isclcha为false
		data() {
			return {
				isclcha: false
			}
		},

		// 页面/组件加载完成后的生命周期钩子函数
		onLoad() {
			// 可在此处编写页面初始化逻辑、异步数据请求等操作
		},

		// 定义处理用户交互事件的方法集
		methods: {
			// 点击输入框时切换isclcha状态并触发相关样式变化
			input() {
				this.isclcha = !this.isclcha;
			}
			
		}
	}
</script>

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

	/* 定义包裹输入框与动画元素的.box容器样式 */
	.box {
		margin-top: 300px; /* 设置上外边距为300px */
		margin-left: 40%; /* 设置左外边距为屏幕宽度的30% */
	}

	.inputbox {
		position: relative; /* 设置相对定位，以便绝对定位内部元素 */
		width: 196px; /* 设置固定宽度 */
	}

	.inputbox input {
		position: relative; /* 设置相对定位 */
		width: 100%; /* 宽度占满父容器 */
		padding: 20px 10px 10px; /* 设置内边距 */
		background: transparent; /* 背景透明 */
		outline: none; /* 去除轮廓线 */
		box-shadow: none; /* 去除阴影 */
		border: none; /* 去除边框 */
		color: #23242a; /* 文字颜色 */
		font-size: 1em; /* 字体大小 */
		letter-spacing: 0.05em; /* 字间距 */
		transition: 0.5s; /* 添加过渡效果 */
		z-index: 10; /* 设置层叠顺序 */
	}

	.inputbox text {
		position: absolute; /* 绝对定位提示文字 */
		left: 0;
		margin-top: -35px; /* 上移一定距离 */
		margin-left: 10px; /* 左侧内边距 */
		font-size: 1em; /* 字体大小 */
		letter-spacing: 0.05em; /* 字间距 */
		transition: 0.5s; /* 添加过渡效果 */
		pointer-events: none; /* 阻止文字响应鼠标事件 */
	}

	.inputbox i {
		position: absolute; /* 绝对定位动画线条 */
		left: 0;
		bottom: 0; /* 底部对齐 */
		width: 100%; /* 宽度占满父容器 */
		background: #45f3ff; /* 设置线条颜色 */
		border-radius: 4px; /* 圆角 */
		transition: 0.5s; /* 添加过渡效果 */
		pointer-events: none; /* 阻止线条响应鼠标事件 */
		z-index: 9; /* 设置层叠顺序低于输入框 */
	}
</style>