css實現發光的input輸入框
阿新 • • 發佈：2018-07-20
none 兼容 charset ima 瀏覽器兼容 bubuko margin oct info
效果圖截圖：
案例代碼示下：
<!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
註意：
- 這裏使用了
css的transition 動畫屬性。 transition的瀏覽器兼容性，添加瀏覽器廠商前綴。
css實現發光的input輸入框