发光搜索框

 

 
.banner-box .banner-header-up {
padding: 20rpx 24rpx;
width: 70%;
margin: 0 auto;
position: relative;
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 5px;
box-shadow: inset 0 0 0 1px #272727;
font-size: 0px;
z-index: 5;
}

.banner-box .banner-header-up:after {
content: '';
display: block;
height: 2rpx;
left: -50%;
position: absolute;
width: 1000rpx;
top: 30rpx;
background: linear-gradient(to right, #151515, #000, #151515);
z-index: 0;
}

.banner-box .banner-header-up:before {
content: '';
display: block;
height: 2rpx;
left: -50%;
position: absolute;
width: 1000rpx;
top: 32rpx;
background: linear-gradient(to right, #151515, #444, #151515);
z-index: 0;
}

.banner-box .header-addr>text {
max-width: 200rpx;
}

.banner-box .header {
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 20px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 100%;
}
.focus-active {
animation-name: greenPulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}

@-webkit-keyframes greenPulse {
from {
">;
-webkit-box-shadow: 0 0 9px #666;
}
50% {
">;
-webkit-box-shadow: 0 0 27px #05f546;
}

to {
">;
-webkit-box-shadow: 0 0 9px #666;
}
}
posted @ 2018-09-21 18:01  ThisCall  阅读(109)  评论(0)  编辑  收藏  举报