index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "Description" content="Ysy的模拟点击-CSS练习" />
<meta name="keywords" content="模拟点击特效" />
<title>模拟点击-CSS</title>
<link href="css/mouseClick.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="box">
<input type="checkbox" class="checkbox" />
<div class="list">
<ul>
<li>主页</li>
<li>Ysy</li>
<li>今夕何夕</li>
<li>遇此良人</li>
</ul>
</div>
<div class="btn"></div>
</div>
</body>
</html>
css
/*
:hover
block 盒子 ,可以设置宽高
inline 文本,不能设置宽高
* */
ul{
margin: 0;/*去掉外边距*/
list-style: none;
padding: 0;/*去掉内边距*/
}
body{
display: flex;/*盒子垂直居中,弹性盒模型,flex布局*/
margin: 0;
/*平滑渐变linear-gradient*/
background-image: linear-gradient(#f17c67 50%,#376956 50%);
background-repeat: no-repeat;
height: 100%;/*继承父元素的高度*/
}
html{
height: 100%;/*继承窗口的高度*/
}
.box{
display: flex;/*让紫色变成和pink水平*/
margin:auto;/*盒子水平居中 margin:auto auto,上下,左右*/
/*width: 390px; 后面盒子要变小,不能设置绝对宽度*/
height: 90px;
background-color: #fff;
position: relative;
}
.box .list{
width:300px;
height: 90px;
transition: 0.5s;
overflow: hidden;
}
.box .btn{/*必须要加空格*/
width: 90px;
height: 90px;
/*background-color: orchid;*/
position: relative;/*成为参照物*/
}
.box .list ul li{
width: 75px;
height: 90px;
text-align: center;
line-height: 90px;
font-size: 14px;
font-weight: bold;/*加粗*/
cursor: pointer;/*鼠标移到字上出现小手*/
}
.box .list ul{
display: flex;
width: 300px;
}
.box .list ul li:hover{
color: #0cf;
}
/*伪元素:凭空生成的元素 before/after ,解决样式缺陷性
伪类:状态/满足条件*/
.box .btn:before,.box .btn:after{
position: absolute;/*对应参照物的位置*/
left: 25px;
top: 43px;
display: block;
content: '';
width: 40px;
height: 4px;
background-color: black;
transform: rotate(45deg);
transition: 0.5s;
}
.box .btn:after{
transform: rotate(-45deg);
}
.box .checkbox:checked~.btn:before{
top: 33px;
transform: rotate(0deg);
}
.box .checkbox:checked~.btn:after{
top: 53px;
transform: rotate(-180deg);
}
.box .checkbox{
margin: 0;
right: 0;
position: absolute;
width: 90px;
height: 90px;
z-index: 1;
opacity: 0/*透明度*/;
}
.box .checkbox:checked~.list{
width: 0;
}