导航条案例
鼠标悬浮,进度条高度变化,并且深色背景逐渐覆盖进度条
鼠标离开,进度条恢复原状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
position: relative;
width: 800px;
margin: 100px auto;
/* border: 1px solid black; */
}
.parent {
position: absolute;
left: 100px;
/* 设置bottom值之后,为了保持这个值不变,那么元素的高度发生变化时就只能向上增长 */
bottom: 10px;
width: 40px;
height: 2px;
background-color: rgba(0, 0, 0, .2);
/* border: 1px solid red; */
transition: all .1s;
/* transform: rotateX(180deg); */
}
.child {
width: 0;
height: 2px;
background-color: rgba(0, 0, 0