今天是打算开始实战自己一直要写的网站,然后开始疯狂的翻网站找灵感,在路过阿里云的时候,突然发现——欸?这个输入框的效果看着可以欸,于是乎,电源一拔坐了起来,分析效果。
其实这个效果并不难理解:
1. 当鼠标指向的时候,文本框会拉长 ;
2. 当鼠标移开的时候,文本框会恢复原来长度;
3. 当点击输入框后,光标在输入框中聚焦后,鼠标再移开,它会保持拉长后的长度;
4. 当失去聚焦的时候,文本框长度再次缩短;
一分析完,就开始埋头劈里啪啦的一阵猛敲:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人比较喜欢用18号字, Fira Code, 行距 1.02 看着特舒服</title>
</head>
<style>
.search{
width: 10rem; /* 初始宽度 */
font-size: 1.1rem;
color: ghostwhite;
padding: 0.411rem 1rem; /* 为了让输入框文本在中心(当时写的时候没有注意到这点,直接设置的高度,导致输入聚焦有点偏了...) */
background-color: #0001;
border: 1px solid #7b4aff;
-webkit-border-radius: 0.2rem; /* 圆角 */
-moz-border-radius: 0.2rem;
border-radius: 0.2rem;
-webkit-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76); /* 变换动画1.2s 速度使用贝塞尔曲线 */
-moz-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
-ms-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
-o-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
}
.search:hover{
width: 22rem; /* 光标经过拉长 */
border: 1px solid #7b4aff;
background-color: rgba(18, 18, 39, 0.4);
-webkit-border-radius: 0.2rem;
-moz-border-radius: 0.2rem;
border-radius: 0.2rem;
}
</style>
<body>
<header>
<div class="topBar">
<input class="search" type="text" value=""/>
<