其他
【每日一练】98—动画下拉菜单效果的实现
写在前面
下拉菜单一直是web项目里比较常见的一个功能,它的出现,可以让我们在有限的页面空间里实现更多的选择。
今天这个下拉菜单效果,也没有什么特别的地方,是一个比较常见效果,具体的效果,请看下面的最终效果:
<!DOCTYPE html>
<html>
<head>
<title>【每日一练】98—动画下拉菜单效果的实现</title>
</head>
<body>
<div class="dropdown">
<input type="text" class="text2" readonly placeholder="选择你擅长的技能">
<div class="option">
<div onmouseover="show('html')">HTML</div>
<div onmouseover="show('CSS')">CSS</div>
<div onmouseover="show('JavaScript')">JavaScript</div>
<div onmouseover="show('ReactJS')">ReactJS</div>
<div onmouseover="show('VueJS')">VueJS</div>
</div>
</div>
<script>
function show(a){
document.querySelector('.text2').value = a;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function(){
dropdown.classList.toggle('active')
}
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
min-height: 100vh;
background: #f9f9f9;
}
.dropdown
{
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before
{
content: '';
position: absolute;
top: 25px;
right: 28px;
width: 12px;
height: 2px;
background: #555;
transform: rotate(40deg);
z-index: 10;
transition: 0.5s;
}
.dropdown.active::before
{
right: 20px;
}
.dropdown::after
{
content: '';
position: absolute;
top: 25px;
right: 20px;
width: 12px;
height: 2px;
background: #555;
transform: rotate(-40deg);
z-index: 10;
transition: 0.5s;
}
.dropdown.active::after
{
right: 28px;
}
.dropdown input
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 16px;
background: #fff;
text-transform: capitalize;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
outline: none;
}
.dropdown .option
{
position: absolute;
top: 70px;
width: 100%;
border-radius: 10px;
background: #fff;
box-shadow: 0 30px 30px rgba(0,0,0,0.05);
overflow: hidden;
visibility: hidden;
opacity: 0;
transition: 0.25s;
}
.dropdown.active .option
{
visibility: visible;
opacity: 1;
}
.dropdown .option div
{
padding: 12px 20px;
cursor: pointer;
}
.dropdown .option div:hover
{
background: #62baea;
color: #fff;
}
写在最后
以上就是今天【每日一练】的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号