css:box-shadow的光暈效果

來源:互聯網
上載者:User

如果用過twitter,你可能已經留意到當輸入框獲得焦點後,它的邊框會有藍色發光的效果,並且這裡運用了transition屬性,使得光暈效果有很平滑的過渡。本教程將講述如何運用box-shadow屬性來做到這樣的效果。

CSS代碼如下:

  1. input {
  2. transition: all 0.30s ease-in-out;
  3. -webkit-transition: all 0.30s ease-in-out;
  4. -moz-transition: all 0.30s ease-in-out;
  5. outline:none;
  6. }

這裡通過運用transition屬性來展現input框的變化。

同時,這裡需要用outline屬性來使safari和chrome的預設高亮無效。

這裡在使用box-shadow屬性時,為了使其不像是陰影製作效果而達到發光的效果,因而採用了明亮的藍色。

同時也可以用RGBA,這樣就可以控制顏色的透明度了。

代碼如下:

  1. input:focus {
  2. border:#35a5e5 1px solid;
  3. box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  4. -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  5. -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  6. }

同時可以用border-radius屬性來做圓角效果。

完整CSS代碼如下:

  1. input {
  2. transition: all 0.30s ease-in-out;
  3. -webkit-transition: all 0.30s ease-in-out;
  4. -moz-transition: all 0.30s ease-in-out;
  5. border: #35a5e5 1px solid;
  6. border-radius: 4px;
  7. outline: none;
  8. }
  9. input:focus {
  10. box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  11. -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  12. -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  13. }

原文連結:http://htmltips.info/css-for-intermediaries/box-shadow-css-glow-effect/

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.