请选择 进入手机版 | 继续访问电脑版
在线投稿 文字标题 文字标题 文字标题 文字标题 文字标题
切换皮肤

一款CSS3发光搜索表单,利用CSS3的动画属性,设置0%和100%时的颜色样式,让其渐变,再配合有明显对比的背景,就能模拟出发光的效果了,先来看一下效果图:

73981397483340.jpg

图上的搜索框在被激活的时候会出现闪闪发光的特效。


下面我们来一起看看源代码。

HTML代码非常简单,一个文本框和一个提交按钮:

  1. <form action="" method="">            
  2.         <input type="search" placeholder="What are you looking for?">               
  3.         <button>Search</button>
  4. </form>
复制代码

然后重点就是CSS3代码了,首先是对搜索框和搜索按钮的样式进行初始化,为了配合背景能出现发光的效果,我们使用了glow动画,我们对它们的样式作了如下设置:
  1. .webdesigntuts-workshop {
  2.     background: #151515;
  3.     height: 100%;
  4.     position: absolute;
  5.     text-align: center;
  6.     width: 100%;
  7. }.webdesigntuts-workshop:before,
  8. .webdesigntuts-workshop:after {
  9.     content: '';
  10.     display: block;   
  11.     height: 1px;
  12.     left: 50%;
  13.     margin: 0 0 0 -400px;
  14.     position: absolute;
  15.     width: 800px;
  16. }.webdesigntuts-workshop:before {
  17.     background: #444;
  18.     background: -webkit-linear-gradient(left, #151515, #444, #151515);
  19.     background: -moz-linear-gradient(left, #151515, #444, #151515);
  20.     background: -o-linear-gradient(left, #151515, #444, #151515);
  21.     background: -ms-linear-gradient(left, #151515, #444, #151515);
  22.     background: linear-gradient(left, #151515, #444, #151515);
  23.     top: 192px;
  24. }.webdesigntuts-workshop:after {
  25.     background: #000;
  26.     background: -webkit-linear-gradient(left, #151515, #000, #151515);   
  27.     background: -moz-linear-gradient(left, #151515, #000, #151515);   
  28.     background: -o-linear-gradient(left, #151515, #000, #151515);   
  29.     background: -ms-linear-gradient(left, #151515, #000, #151515);   
  30.     background: linear-gradient(left, #151515, #000, #151515);   
  31.     top: 191px;
  32. }.webdesigntuts-workshop form {
  33.     background: #111;
  34.     background: -webkit-linear-gradient(#1b1b1b, #111);
  35.     background: -moz-linear-gradient(#1b1b1b, #111);
  36.     background: -o-linear-gradient(#1b1b1b, #111);
  37.     background: -ms-linear-gradient(#1b1b1b, #111);
  38.     background: linear-gradient(#1b1b1b, #111);
  39.     border: 1px solid #000;
  40.     border-radius: 5px;
  41.     box-shadow: inset 0 0 0 1px #272727;
  42.     display: inline-block;
  43.     font-size: 0px;
  44.     margin: 150px auto 0;
  45.     padding: 20px;
  46.     position: relative;
  47.     z-index: 1;
  48. }.webdesigntuts-workshop input {
  49.     background: #222;
  50.     background: -webkit-linear-gradient(#333, #222);   
  51.     background: -moz-linear-gradient(#333, #222);   
  52.     background: -o-linear-gradient(#333, #222);   
  53.     background: -ms-linear-gradient(#333, #222);   
  54.     background: linear-gradient(#333, #222);   
  55.     border: 1px solid #444;
  56.     border-radius: 5px 0 0 5px;
  57.     box-shadow: 0 2px 0 #000;
  58.     color: #888;
  59.     display: block;
  60.     float: left;
  61.     font-family: 'Cabin', helvetica, arial, sans-serif;
  62.     font-size: 13px;
  63.     font-weight: 400;
  64.     height: 40px;
  65.     margin: 0;
  66.     padding: 0 10px;
  67.     text-shadow: 0 -1px 0 #000;
  68.     width: 200px;
  69. }.ie .webdesigntuts-workshop input {
  70.     line-height: 40px;
  71. }.webdesigntuts-workshop input::-webkit-input-placeholder {
  72.    color: #888;
  73. }.webdesigntuts-workshop input:-moz-placeholder {
  74.    color: #888;
  75. }.webdesigntuts-workshop input:focus {
  76.     -webkit-animation: glow 800ms ease-out infinite alternate;
  77.     -moz-animation: glow 800ms ease-out infinite alternate;
  78.     -o-animation: glow 800ms ease-out infinite alternate;
  79.     -ms-animation: glow 800ms ease-out infinite alternate;
  80.     animation: glow 800ms ease-out infinite alternate;
  81.     background: #222922;
  82.     background: -webkit-linear-gradient(#333933, #222922);
  83.     background: -moz-linear-gradient(#333933, #222922);
  84.     background: -o-linear-gradient(#333933, #222922);
  85.     background: -ms-linear-gradient(#333933, #222922);
  86.     background: linear-gradient(#333933, #222922);
  87.     border-color: #393;
  88.     box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
  89.     color: #efe;
  90.     outline: none;
  91. }.webdesigntuts-workshop input:focus::-webkit-input-placeholder {
  92.     color: #efe;
  93. }.webdesigntuts-workshop input:focus:-moz-placeholder {
  94.     color: #efe;
  95. }.webdesigntuts-workshop button {
  96.     background: #222;
  97.     background: -webkit-linear-gradient(#333, #222);
  98.     background: -moz-linear-gradient(#333, #222);
  99.     background: -o-linear-gradient(#333, #222);
  100.     background: -ms-linear-gradient(#333, #222);
  101.     background: linear-gradient(#333, #222);
  102.     -webkit-box-sizing: content-box;
  103.     -moz-box-sizing: content-box;
  104.     -o-box-sizing: content-box;
  105.     -ms-box-sizing: content-box;
  106.     box-sizing: content-box;
  107.     border: 1px solid #444;
  108.     border-left-color: #000;
  109.     border-radius: 0 5px 5px 0;
  110.     box-shadow: 0 2px 0 #000;
  111.     color: #fff;
  112.     display: block;
  113.     float: left;
  114.     font-family: 'Cabin', helvetica, arial, sans-serif;
  115.     font-size: 13px;
  116.     font-weight: 400;
  117.     height: 40px;
  118.     line-height: 40px;
  119.     margin: 0;
  120.     padding: 0;
  121.     position: relative;
  122.     text-shadow: 0 -1px 0 #000;
  123.     width: 80px;
  124. }    .webdesigntuts-workshop button:hover,
  125. .webdesigntuts-workshop button:focus {
  126.     background: #292929;
  127.     background: -webkit-linear-gradient(#393939, #292929);   
  128.     background: -moz-linear-gradient(#393939, #292929);   
  129.     background: -o-linear-gradient(#393939, #292929);   
  130.     background: -ms-linear-gradient(#393939, #292929);   
  131.     background: linear-gradient(#393939, #292929);
  132.     color: #5f5;
  133.     outline: none;
  134. }.webdesigntuts-workshop button:active {
  135.     background: #292929;
  136.     background: -webkit-linear-gradient(#393939, #292929);
  137.     background: -moz-linear-gradient(#393939, #292929);
  138.     background: -o-linear-gradient(#393939, #292929);
  139.     background: -ms-linear-gradient(#393939, #292929);
  140.     background: linear-gradient(#393939, #292929);
  141.     box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
  142.     top: 1px;
  143. }
复制代码

下面是我们定义的glow动画,为了适应不同内核的浏览器,我们分别对其做了如下设置:
  1. @-webkit-keyframes glow {
  2.     0% {
  3.         border-color: #393;
  4.         box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
  5.     }   
  6.     100% {
  7.         border-color: #6f6;
  8.         box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
  9.     }}
  10. @-moz-keyframes glow {
  11.     0% {
  12.         border-color: #393;
  13.         box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
  14.     }   
  15.     100% {
  16.         border-color: #6f6;
  17.         box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
  18.     }}
  19. @-o-keyframes glow {
  20.     0% {
  21.         border-color: #393;
  22.         box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
  23.     }   
  24.     100% {
  25.         border-color: #6f6;
  26.         box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
  27.     }}
  28. @-ms-keyframes glow {
  29.     0% {
  30.         border-color: #393;
  31.         box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
  32.     }   
  33.     100% {
  34.         border-color: #6f6;
  35.         box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
  36.     }}
  37. @keyframes glow {
  38.     0% {
  39.         border-color: #393;
  40.         box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
  41.     }   
  42.     100% {
  43.         border-color: #6f6;
  44.         box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
  45.     }}
复制代码

最后我们将这个效果的源码打包一份供大家参考学习。下载地址>>

回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则


    Archiver|手机版|小黑屋|齐聚无忧 |网站地图

    Powered by Discuz! X3.4  © 2001-2013 Comsenz Inc.