使用CSS实现focus时候外发光动画效果实例页面

回到相关文章 »

代码：

CSS代码：
.focus-trans {
    position: absolute; left: 99px; top: -100px;
    width: 100px; height: 30px;
    outline: 5px auto -webkit-focus-ring-color;
    box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset;
    -webkit-box-shadow: none;
    border-radius: 3px;
    -webkit-transition: none;
    transition: none;
    -moz-transition: all .15s;    
    visibility: hidden;
}
form input:focus, form a:focus { z-index: 1; outline: none; }

  form *:focus ~ .focus-trans { visibility: visible; transition: all .15s;}
.account:focus ~ .focus-trans { width: 328px; height: 42px; left: 99px; top: 0; }
   .code:focus ~ .focus-trans {  width: 130px; height: 42px; left: 99px; top: 66px; }
  .clear:focus ~ .focus-trans { width: 60px; height: 18px; left: 206px; top: 143px; }
 .button:focus ~ .focus-trans { width: 82px; height: 33px; left: 99px; top: 186px; }
HTML代码：
<form action="" method="post">
    <label>账户名称：</label><input class="focus-trans-input account" required autofocus placeholder="手机号/邮箱">
    <div class="focus-trans-li"></div>
    <label>验证码：</label><input class="focus-trans-input code" name="code" required autocomplete="off"> 
    <div class="focus-trans-li"></div>  
    <img src="getimg.aspx?guid=1" width="100" height="36"><a href="javascript:" class="clear">看不清楚？</a>
    <div class="focus-trans-li"></div>
    <input type="submit" class="button" value="提交">
    <div class="focus-trans"></div>
</form>

效果：

看不清楚？