css实现发光的input输入框

最新推荐文章于 2024-06-29 16:52:06 发布

草巾冒小子

最新推荐文章于 2024-06-29 16:52:06 发布

阅读量1.4k

点赞数

分类专栏： CSS 3 文章标签： transition

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/80882036

版权

CSS 3 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

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>