css实现发光的input输入框

鉴于前期工作总结，简单总结一下开发中经常遇到的发光的输入框的UI视觉体验。
聚焦input文本框：边框外围背景伴有明显的动画效果，呈现为虚化，雾化效果。

效果图截图：

案例代码示下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>发光输入框</title><style type="text/css">input{width: 280px;height: 30px;}textarea{width: 280px;height: 80px;}input,textarea{-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;outline: none;padding: 3px 0 3px 3px;margin: 5px 1px 3px 0;border: #ddd 1px solid;}input:focus,textarea:focus{box-shadow: 0 0 5px rgba(216,76,41,1);padding: 3px 0 3px 3px;margin: 5px 1px 3px 0;border: rgba(216,76,41,1) 1px solid;}</style></head><body><input type="text" name="" id="" value="" /><textarea></textarea></body>
</html>

注意：

这里使用了css的 transition 动画属性。

transition的浏览器兼容性，添加浏览器厂商前缀。

以上就是关于 “ css实现发光的input输入框 ” 的全部内容。

css实现发光的input输入框相关推荐

CSS 仿谷歌input输入框，失焦时标题在输入框中，聚焦标题上移
问题由于中英文国际化问题,导致表单中input输入框前的标题长度不一. 表单input布局一般有两种方式,一种是左右结构,一种是上下结构. 上下结构能够很好地解决标题国际化切换导致的长短不一的问题, ...
html文本框如何做出立体效果,CSS教程:网页input输入框立体效果
CSS教程:网页input输入框立体效果互联网发布时间:2009-04-02 19:34:50 作者:佚名我要评论网页制作Webjx文章简介:去年常常玩开心网,耗在上面的时间也不少 ...
android按钮在容器下方,使用flex布局解决安卓手机上固定在底部的按钮，在键盘弹起后挡住input输入框的问题...
移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡 ...
html线框聚焦效果,24种表单input输入框聚焦动画特效
这是一组效果超酷的表单input输入框聚焦CSS3动画特效.这组特效共24种不同的聚焦动画效果,分为3个类别,分别是边框动画特效,背景动画特效和浮动标签动画特效. 这组输入框聚焦特效主要使用CSS3 ...
Input输入框的失焦
最近遇到一个需求:需要点击输入框后,出现下拉选项,且下拉选项的内容以树结构展示,如图其中遇到一个棘手的问题,在输入框失去焦点时,下拉选项框需要隐藏, 这意味着当我准备点击树节点时,整个下拉选项框就被 ...
14款CSS3炫酷表单input输入框美化效果【附源码】
这是一款效果非常酷的CSS3表单input输入框美化效果插件.为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验.这个CSS3表单input输入框美化插件就是一个很好的例子.这个插件 ...
H5页面input输入框，在ios手机中被顶出页面解决方案
input输入框获取焦点的时候,输入框被键盘定出页面,解决方案如下: 页面布局如下:html: div class="cdSearch-content"> <input ...
ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景
一. 代码环境 "react": "18.1.0", "antd": "^4.20.5", "typescri ...
html网页登录红色按钮,CSS让网页提交input按钮与众不同
CSS让网页提交input按钮与众不同互联网发布时间:2009-04-02 19:36:01 作者:佚名我要评论网页制作Webjx文章简介:你是不是觉得自己的主页不够靓丽,想让它有 ...

css实现发光的input输入框

css实现发光的input输入框

效果图截图：

案例代码示下：

注意：

css实现发光的input输入框相关推荐

最新文章

热门文章