用CSS实现一个简单的动画效果
用CSS实现一个简单的动画效果
Tomfriwel 发表于2年前
用CSS实现一个简单的动画效果
  • 发表于 2年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 最近跟同事学到了一个灵活应用:before的方法

html

<html>
	<head>
		<meta charset="utf-8" />
		<style>
			#my_btn{
				width:200px;
				height:40px;
				border:1px solid red;
				background:red;
				border-radius:5px;
				color:white;
				font-size:14px;
				line-height:40px;
				transition:0.2s;
			}
			#my_btn.clicked{
				color:red;
				background:rgb(222,222,222);
			}
			#my_btn:before{
				content:'没被点击过';
				margin-left:10px;
				transition:0.2s;
			}
			#my_btn.clicked:before{
				content:'点击过';
				margin-left:120px;
			}
			
	</style>
	</head>
	<body>
		<div id="my">
			<span><em></em></span>
		</div>
		<div id="my_btn">
		<div>
	</body>
</html>
<script src="../js/jquery.min.js"></script>
<!--jquery自己下-->
<script type="text/javascript" src="http://code.hs-cn.com/jquery/jquery-1.7.1.min.js"></script>
<script>
//if cliked remove else add.
$('#my_btn').click(function(){
	var z = $(this);
	if(z.hasClass('clicked')){
		z.removeClass('clicked');
	}else{
		z.addClass('clicked');
	}
});
</script>

这里主要是灵活应用了css 里的:before选择器

相当于加了个<span>something</span>



共有 人打赏支持
粉丝 1
博文 2
码字总数 677
×
Tomfriwel
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: