[分享]css制作文本框发光效果

在网页设计中，文本框是一个经常使用的元素，它可以让用户填写信息，参与互动。如果将文本框添加边框并做一些简单的处理，就可以让它在用户注意力中更加突出。下面介绍一种使用CSS实现文本框发光效果的方法。in...

在网页设计中，文本框是一个经常使用的元素，它可以让用户填写信息，参与互动。如果将文本框添加边框并做一些简单的处理，就可以让它在用户注意力中更加突出。下面介绍一种使用CSS实现文本框发光效果的方法。

input[type="text"]{
    border: none;
    border-bottom: solid 2px;
    background-color: transparent;
    text-align: center;
    font-size: 16px;
    outline: none;
    position: relative;
}

input[type="text"]:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.3s;
}

input[type="text"]:hover:before,
input[type="text"]:focus:before{
    opacity: 1;
} 

上面的代码中，首先定义了文本框的基本样式。设置了边框为无，底部边框为2像素的黑色实线，背景色为透明白色，字体居中，字体大小为16像素，outline为无。同时，为了让文本框发光，还加入了一个:before伪元素。该元素在文本框上方覆盖整个范围，使用box-shadow属性添加了一个黑色透明的框阴影，并将不透明度设为0。当用户鼠标悬停在文本框上或者文本框获取焦点时，使用CSS过渡动画将不透明度从0变为1，就可以让文本框发出发光效果了。

可以根据实际情况修改box-shadow和opacity的值，以达到不同的效果。例如，将box-shadow的四个长度值都增加，可以让文本框发出更强烈的光芒；将opacity的值降低，可以让文本框只发出微弱的光芒。另外，也可以根据需求添加其他的文本框样式，例如加入圆角，使得文本框更具美感和可读性。