虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(ID:itclanCoder)
如果不知道如何操作
点击这里,标星不迷路
━━━━━━
前言
让表单的输入框动起来
单个输入框表单聚焦时输入框变化
html 结构代码
type="text" placeholder="请输入您的姓名" />
css 代码,当然你使用类选择器也是可以的,这里我使用了 css 的属性选择器 关于选择器的优先级,可自行尝试测试:
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
css代码
input[type='text'] {
height: 40px;
width: 200px;
background: transparent; // 背景透明
border: none;
border-bottom: 1px solid #999;
text-indent: 20px;
transition: 0.3;
outline: none;
}
input[type='text']:hover {
// 鼠标经过输入框时,更改border颜色
border-color: #42b983;
}
input[type='text']:focus {
// 鼠标聚焦焦点时
border-bottom-color: #f1190d;
}
input[type='text']::-webkit-input-placeholder {
// 实现该效果主要在这里
transition: 0.5s; // 过度0.5s
font-size: 14px; // 字体变为14px
transform-origin: top left; // 属性允许您改变被转换元素的位置,从上到左,x轴水平方向top,y轴垂直方向left
}
input[type='text']:focus::-webkit-input-placeholder {
transform: scale(0.8) translateY(-10px); // 缩小0.8倍,同时向上垂直方向平移10px
}
多个输入框表单聚焦时输入框变化
input[type='text'],
input[type='password'] {
height: 40px;
width: 200px;
background: transparent;
border: none;
border-bottom: 1px solid #999;
text-indent: 20px;
transition: 0.3;
outline: none;
}
input[type='text']:hover,
input[type='password']:hover {
border-color: #42b983;
}
input[type='text']:focus,
input[type='password']:focus {
border-bottom-color: #f1190d;
}
input[type='password']::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder {
transition: 0.5s;
font-size: 14px;
transform-origin: top left;
}
input[type='password']:focus::-webkit-input-placeholder,
input[type='text']:focus::-webkit-input-placeholder {
transform: scale(0.8) translateY(-10px);
}
分析
实现这一效果,主要在于-webkit-input-placeholder
这个伪元素的方式,结合 css 中的变换transform
,缩小scale
,与垂直方向平移
公众号(ID:itclanCoder)
码能让您早脱菜籍,文能让您洗净铅华
可能您还想看更多:
![efc9075012dd6ab96901e946800b0d57.png](https://img-blog.csdnimg.cn/img_convert/efc9075012dd6ab96901e946800b0d57.png)
理解 Es6 中的 Symbol 类型
![06e9c4d82618e37c986ecd58a9ac6446.png](https://img-blog.csdnimg.cn/img_convert/06e9c4d82618e37c986ecd58a9ac6446.png)
微信小程序中 setData 详解
![dcc31be038bb149142e44f0be6f97a92.png](https://img-blog.csdnimg.cn/img_convert/dcc31be038bb149142e44f0be6f97a92.png)
小程序-云开发-多图片内容安全检测
原文出处: https://coder.itclan.cn/fontend/css/example-input-focus-animate/