实战演练---花里胡哨搜索框【b站视频的代码】
【实战演练---花里胡哨搜索框【b站视频的代码】】
文章目录
- 运行效果
- html代码
- css代码
运行效果
文章图片
html代码
search - 锐客网
css代码
body{
margin: 0;
padding: 0;
background: #e84118;
}
.searchBox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.searchBox:hover > .searchTxt{
width: 240px;
padding: 0 6px;
}
.searchBox:hover > .searchBtn{
background: white;
}
.searchBtn{
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.searchTxt{
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
推荐阅读
- Python爬虫|Python爬虫 --- 1.4 正则表达式（re库）
- 振兴中华---争做新时代的好少年
- 青春的恋习曲
- 《机器学习实战》高清中文版PDF英文版PDF+源代码下载
- --木木--|--木木-- 第二课作业#翼丰会（每日一淘6+1实战裂变被动引流# 6+1模式）
- 《将来的你，一定会感谢现在战胜烦恼的自己-------第四章/第十一节/用逆向思维解除烦恼》
- [源码解析]|[源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)
- 无私便是最大的自私---多久没有无私过了
- 《教育心理学》读书笔记五---关注特殊群体学生|《教育心理学》读书笔记五---关注特殊群体学生 做有温度的教育
- 问题是那些问题，解决全在自己----转逆境为喜悦