模拟鼠标点击特效

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;
}

秒客网

模拟鼠标点击特效

相关文章