当前位置:网站首页>搜索框效果的实现【每日一题】
搜索框效果的实现【每日一题】
2022-07-07 11:52:00 【zx_20220104】
搜索框是很常用的一个功能,因此,今天我们一起来练习写一个搜索框的效果,希望今天的这个练习对你有帮助,下面我们一起来看今天练习的最终效果:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>【每日一练】18—搜索框效果的实现</title>
</head>
<body>
<div class="search">
<div class="icon"></div>
<div class="input">
<input type="text" name="" id="SearchInput" placeholder="Search">
</div>
<span class="clear" onclick="document.getElementById('SearchInput').value = ''"></span>
</div>
<script type="text/javascript">
const icon = document.querySelector('.icon');
const search = document.querySelector('.search');
icon.onclick = function(){
search.classList.toggle('active');
}
</script>
</body>
</html>
CSS代码:
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fafafa;
}
.search
{
position: relative;
width: 60px;
height: 60px;
background: #fff;
border-radius: 60px;
overflow: hidden;
transition: 0.5s;
box-shadow: 0 0 0 2px #00a6bc;
}
.search.active
{
width: 360px;
}
.search .icon
{
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
}
.search .icon:before
{
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 3px solid #00a6bc;
border-radius: 50%;
transform: translate(-4px,-4px);
transition: 0.5s;
}
.search .icon:after
{
content: '';
position: absolute;
width: 3px;
height: 12px;
background:#00a6bc;
transform: translate(6px,6px) rotate(315deg);
}
.search .input
{
position: relative;
width: 300px;
height: 60px;
left: 60px;
background: #f0f;
display: flex;
justify-content: center;
align-items: center;
}
.search .input input
{
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 10px 0;
border: none;
outline: none;
font-size: 18px;
}
.clear
{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
width: 15px;
height: 15px;
display: block;
background: #fff;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.clear:before
{
position: absolute;
content: '';
width: 1px;
height: 15px;
background: #999;
transform: rotate(45deg);
}
.clear:after
{
position: absolute;
content: '';
width: 1px;
height: 15px;
background: #999;
transform: rotate(315deg);
}
以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我!
边栏推荐
- [fortress machine] what is the difference between cloud fortress machine and ordinary fortress machine?
- 云计算安全扩展要求关注的安全目标和实现方式区分原则有哪些?
- LeetCode简单题分享(20)
- Oracle advanced (V) schema solution
- 2022-7-6 使用SIGURG来接受外带数据,不知道为什么打印不出来
- QQ medicine, Tencent ticket
- Digital IC Design SPI
- 参数关键字Final,Flags,Internal,映射关键字Internal
- 【日常训练】648. 单词替换
- Laravel Form-builder使用
猜你喜欢
LIS longest ascending subsequence problem (dynamic programming, greed + dichotomy)
Enregistrement de la navigation et de la mise en service du robot ROS intérieur (expérience de sélection du rayon de dilatation)
2022-7-7 Leetcode 844. Compare strings with backspace
交付效率提升52倍,运营效率提升10倍,看《金融云原生技术实践案例汇编》(附下载)
118. Yanghui triangle
. Net core about redis pipeline and transactions
SSRF漏洞file伪协议之[网鼎杯 2018]Fakebook1
Leecode3. Longest substring without repeated characters
The delivery efficiency is increased by 52 times, and the operation efficiency is increased by 10 times. See the compilation of practical cases of financial cloud native technology (with download)
记一次 .NET 某新能源系统 线程疯涨 分析
随机推荐
LED light of single chip microcomputer learning notes
Signal strength (RSSI) knowledge sorting
Ikvm of toolbox Net project new progress
THINKPHP框架的优秀开源系统推荐
华为镜像地址
[fortress machine] what is the difference between cloud fortress machine and ordinary fortress machine?
Navicat run SQL file import data incomplete or import failed
得物客服热线的演进之路
记一次 .NET 某新能源系统 线程疯涨 分析
LIS longest ascending subsequence problem (dynamic programming, greed + dichotomy)
Enregistrement de la navigation et de la mise en service du robot ROS intérieur (expérience de sélection du rayon de dilatation)
648. Word replacement: the classic application of dictionary tree
Move base parameter analysis and experience summary
提升树莓派性能的方法
云计算安全扩展要求关注的安全目标和实现方式区分原则有哪些?
Leecode3. Longest substring without repeated characters
toRaw和markRaw
[etc.] what are the security objectives and implementation methods that cloud computing security expansion requires to focus on?
Evolution of customer service hotline of dewu
属性关键字Aliases,Calculated,Cardinality,ClientName