登录

纯css制作发光搜索框

在网上看到了一款发光的搜索框,感觉还不错,自己学习了一波(博主自己也是个菜鸟,只有学习了),这不分享出来大家一起学习学习,有需要的可以照着代码敲一遍(建议哈,当然你也可以试着复制),这样有助于学习哦,俗话说,好记性不如烂笔头嘛,大神绕路哈!!!!

如图:

纯css制作发光搜索框.png

以下贴代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>css3实现发光搜索框-柏平博客</title>  
<style>  
body {
  background-color:  #151515;
}
.outside{
	text-align: center;
}
.star-input {
    position: relative;
    background: #111;
    background: -webkit-linear-gradient(#1b1b1b, #111);
    background: -moz-linear-gradient(#1b1b1b, #111);
    background: -o-linear-gradient(#1b1b1b, #111);
    background: -ms-linear-gradient(#1b1b1b, #111);
    background: linear-gradient(#1b1b1b, #111);
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #272727;
    display: inline-block;
    margin: 20% auto;
    padding: 20px;
    z-index: 1;
}
.star-input input ,.star-input button {
    background: #222;
    background: -webkit-linear-gradient(#333, #222);    
    background: -moz-linear-gradient(#333, #222);    
    background: -o-linear-gradient(#333, #222);    
    background: -ms-linear-gradient(#333, #222);    
    background: linear-gradient(#333, #222);    
    border: 1px solid #444;
    border-radius: 5px 0 0 5px;
    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: 200px;
    z-index: 3;
}
/*这里是发光的重点代码*/
.star-input input:focus {
    -webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
     /*这里使用了呼吸动画*/
    animation: glow 800ms ease-out infinite alternate;
    background: #222922;
    background: -webkit-linear-gradient(#333933, #222922);
    background: -moz-linear-gradient(#333933, #222922);
    background: -o-linear-gradient(#333933, #222922);
    background: -ms-linear-gradient(#333933, #222922);
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}
.star-input button{
	width: 60px;
	outline: none;
	height: 42px;/*这里根据自己展示的样式来设置哈*/
	border-radius: 0px 5px 5px 0;
}
.star-input button:hover{border:1px solid #393; color: #393;}
/*以下定义动画帧f,分别注明浏览器所属内核*/
@-webkit-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }    
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}
</style>  
</head>  
<body>  
<div class="outside">
<div class="star-input">
<input type="text" name="">
<button>Search</button>
</div>
</div> 
</body>  
</html>


选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

标签: 搜索框

本文标题:纯css制作发光搜索框

本文地址:https://www.zbpnice.cn/post/126.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于7年前 (2017-08-15),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

评论列表 :共有1人吐槽, 3195人围观

Adoncn
Adoncn  3年前 (2021-09-06)  沙发回复
不错,很喜欢!!!

发表评论: