本文介绍了如何使用HTML、CSS和JavaScript创建一个关键词搜索随机图片的功能。通过CSS实现美观的搜索框样式，JavaScript处理用户输入并发送POST请求到PHP接口。PHP接口从堆糖网站获取图片数据，返回JSON格式的图片链接，前端随机选取并展示图片。
defaule.css:
body, html { font-size: 100%; padding: 0; margin: 0;}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body{
color: #fff;
font-weight: 500;
font-size: 1.05em;
font-family: “Microsoft YaHei”,“宋体”,“Segoe UI”, “Lucida Grande”, Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}
search-form.css:
html,body {height: 100%;}
body {padding: 0px; margin:0px; background:url(…/images/1.jpg) ; background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat;}
.search-wrapper {
position: absolute;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top:50px;
left:50%;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
overflow: hidden;
height: 70px;
background: rgba(255,255,255,0);
border-radius:6px;
position: relative;
width:70px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
border-radius: 50px;
width:450px;
background: rgba(0,0,0,0.5);
-webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width:100%;
height: 50px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
最低0.47元/天 解锁文章
3987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
