搜索一下
关于
登录
首页
生活随笔
表面功夫
运筹帷幄
Godot游戏
0
0
分享
Javascript特效之输入框点击效果
表面功夫
15 天前
相信神话
"单击输入框,在上方会显示一行动态的文字提示。 ![鼠标点击效果](http://www.agoodlife.cn/usr/uploads/2024/04/sbdj.gif ""鼠标点击效果"") ## 编写HTML代码如下: ```html
使用 CSS 和 Javascript 输入文本点击动画
请输入您的名字
``` ## 编写CSS代码如下: ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #29313a; } .box { position: relative; width: 350px; } .box input { position: relative; width: 100%; padding: 10px 0; background: transparent; border: none; outline: none; border-bottom: 2px solid #999; color: #fff; font-size: 1.25em; transition: 0.5s; } .box label { position: absolute; left: 0; padding: 10px 0; pointer-events: none; color: #666; user-select: none; } .box label span { display: inline-flex; font-size: 1.25em; letter-spacing: 0.05em; transition: 0.25s; } .box input:focus~label span, .box input:valid~label span { color: #0f0; text-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0; transform: translateY(-40px); } .box input:focus, .box input:valid { border-bottom: 2px solid #fff; } ``` ## 编写Javascript代码如下: ```javascript let label = document.querySelector(""label""); label.innerHTML = label.innerText .split("""") .map( (words, i) => `
${words}
` ) .join(""""); ```"
标签
css
html
javascript
评论
发表
没有更多啦
相信神话
江深竹静两三家,多事红花映白花。报答春光知有处,应须美酒送生涯
以蝼蚁之行,展鸿鹄之志
(本站总访问量 458 次)
热门文章
1
欢迎来到美好生活,让生活回归该有的样子
2
Javascript特效之鼠标悬停特效
3
Javascript特效之输入框点击效果
4
css特效之发光边角效果(炫酷、实用)
5
css特效之创意登录注册框
6
css特效之玻璃形态卡片悬停效果
7
css特效之曲线导航菜单指示器
8
css特效——使用 CSS Clip-path 的纯 CSS3 水波文本动画效果
9
CSS实用技巧——滚动页面菜单指示器导航
10
CSS特效之数据雨云效果——震撼啊
最新评论
1
ヾ(≧∇≦*)ゝ
2
欢迎加入 Typecho 大家族
日志存档
2024年05月
热门标签
css
html
javascript
其它
虫洞
开往
评论