fake-baidu
- html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://at.alicdn.com/t/font_1058920_4sjoxjshme.js"></script>
</head>
<body>
<div class="wrapper">
<span class="inputWrapper">
<input id="keyword" type="text" autocomplete="off">
<span class="floatDiv">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mic"></use>
</svg>
<span class="splitLine"></span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-camera"></use>
</svg>
</span>
</span>
<button>百度一下</button>
<ul id="suggestion" class="suggestion">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
</div>
</body>
</html>
- css:
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
ul,ol {
list-style: none;
}
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: flex;
position: relative;
}
.suggestion {
position: absolute;
top: 100%;
left: 0;
display: none;
}
.suggestion.active{
display: block;
}
.floatDiv {
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
color: #b8b8b8;
}
.splitLine {
width: 0;
height: 16px;
border-left: 1px solid;
margin: 0 10px;
}
.inputWrapper {
position: relative;
display: inline-block;/*玄学*/
float: left;/*为了清除两个span之间的空隙*/
}
.inputWrapper + button {
float: left;/*为了清除两个span之间的空隙*/
}
.inputWrapper input[type=text] {
border: 1px solid #b8b8b8;
width: 540px;
height: 35px;
padding-left: 8px;
font-size: 15px;
line-height: 35px;
}
.inputWrapper input[type=text]:focus {
outline: none;
border-color: #4b94fc;
}
.inputWrapper svg.icon {
width: 20px;
height: 20px;
fill: #b8b8b8;
}
.inputWrapper svg.icon:hover {
fill: #4b94fc;
cursor: pointer;
}
.inputWrapper + button {
background: #4b94fc;
border: none;
font-size: 14px;
color: white;
padding: 0 20px;
}
.inputWrapper + button:focus {
outline: none;
}
.inputWrapper + button:hover {
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2);
background: #3781F0;
}
- javascript:
keyword.oninput = function(e){
var value = keyword.value
if(value) {
suggestion.classList.add('active')
}else{
suggestion.classList.remove('active')
}
}
-
output:
图片上传
- html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="xxx">
<div class="imagePicker">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551098772209&di=d3d333e90361357eb78a0b8a2a1aa757&imgtype=0&src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2015%2F305%2F851%2F2172158503_174163100.jpg_270x270xzq60.jpg" alt="">
<input id="imageInput" type="file">
<div class="mask">
编辑
</div>
</div>
</form>
</body>
</html>
- css:
.imagePicker {
width: 120px;
height: 120px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
border-radius: 60px;
overflow: hidden;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
position: relative;
}
.imagePicker img {
max-width: 100%;
max-height: 100%;
vertical-align: top;/*玄学*/
}
.imagePicker input[type=file] {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
cursor: pointer;
}
.imagePicker .mask {
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.3);
color: white;
}
.imagePicker:hover .mask {
display: flex;
}
- js:
imageInput.onchange = function(e) {
e.target.value = ''
}
-
output:
美化按钮
- html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="b" class="yaoButton">按钮
<span class="circle"></span>
</button>
</body>
</html>
- css:
.yaoButton {
background: none;
border: none;
box-sizing: border-box;
height: 36px;
line-height: 36px;
padding: 0 16px;
font-size: 14px;
transition: all 0.5s;
position: relative;
overflow: hidden;
z-index: 0;
}
.yaoButton:hover {
background: #E5E5E5;
}
.yaoButton:focus {
outline: none;
background: #E5E5E5;
}
.yaoButton > .circle {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
/* transform: translate(-50%, -50%); */
margin-left: -5px;
margin-top: -5px;
transition: transform 0.5s;
visibility: hidden;
pointer-events: none;
z-index: -1;
}
.yaoButton > .circle.active {
transform: scale(8);
visibility: visible;
}
- js:
b.onclick = function() {
b.querySelector('.circle').classList.add('active')
}
b.querySelector('.circle')
.addEventListener('transitionend',function(){
b.querySelector('.circle').classList.remove('active')
})
