模拟鼠标点击特效

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


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值