1.动态搜索框
效果图
代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态搜索框</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #e84118;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover .search-btn {
background-color: #fff;
}
.search-btn {
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #2f3640;
color: #e84118;
display: flex;
justify-content: center;
align-items: center;
transition: .4s;
}
.search-txt {
padding: 0;
float: left;
width: 0px;
height: 40px;
border: none;
background: none;
outline: none;
color: #fff;
font-size: 16px;
transition: .4s;
}
</style>
</head>
<body>
<div class="search-box">
<input class="search-txt" type="text" placeholder="请输入文字">
<a class="search-btn" href="#">
<!-- 图标地址自行替换 -->
<img src="./images/search.png" >
</a>
</div>
</body>
</html>
2.炫酷menu导航
代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2.炫酷menu导航</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
background-color: #272727;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s;
border: 3px solid #fff;
}
.menu-btn-burger {
width: 50px;
height: 6px;
border-radius: 3px;
background-color: #fff;
transition: all .5s;
}
.menu-btn-burger::before,
.menu-btn-burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
border-radius: 3px;
background-color: #fff;
transition: all .5s;
}
.menu-btn-burger::before {
transform: translateY(-16px);
}
.menu-btn-burger::after {
transform: translateY(16px);
}
.menu-btn.open .menu-btn-burger {
transform: translateX(-50px);
background: transparent;
}
.menu-btn.open .menu-btn-burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn-burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
</style>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn-burger"></div>
</div>
</body>
</html>
js
var menuBtn = document.querySelector('.menu-btn');
var menuOpen = true
menuBtn.addEventListener('click', function () {
if (menuOpen) {
menuBtn.classList.add('open');
menuOpen = false;
} else {
menuBtn.classList.remove('open');
menuOpen = true;
}
})
3.1 鼠标经过01
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标经过01</title>
<style>
* {
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.btn {
position: relative;
padding: 12px 20px;
margin: 10px;
min-width: 200px;
background: none;
border: 2px solid #000;
cursor: pointer;
outline: none;
transition: color .4s linear;
}
.btn:hover {
color: #fff;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: -1;
transition: transform 0.5s;
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
}
.btn1::before {
transform: scaleX(0);
}
.btn2::before {
transform: scaleY(0);
}
.btn1:hover::before {
transform: scaleX(1);
}
.btn2:hover::before {
transform: scaleY(1);
}
</style>
</head>
<body>
<div class="middle">
<button class="btn btn1">鼠标经过</button>
<button class="btn btn2">鼠标经过</button>
</div>
</body>
</html>
