利用一个dom元素实现css开关效果

最新推荐文章于 2022-04-29 12:08:09 发布

weixin_43662436

最新推荐文章于 2022-04-29 12:08:09 发布

阅读量288

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_43662436/article/details/104004722

版权

<html>
<head>
  <meta charset="utf-8">
  <title>css开关效果</title>
</head>
<style type="text/css">
	.button{
		height: 20px;
		cursor: pointer;
        position: absolute;
	    padding-right: 28px;
	    background: #f5f5f5;
	    overflow: hidden;
	}
	.button:before{
		transform: rotate(90deg);
	    content: "aa";
	    display: inline-block;
	    width: 100%;
	    height: 20px;
	    background: #ffffff;
	    color: #ffffff;
	    position: relative;
    	left: 2px
    	transition: left .5s;
	}
	.button:hover{
		background: green;
		color: green;
	}
	.button:hover:before{
		left:25px;
	}
</style>
<body>
<div class="button"></div>
</body>
</html>