文档章节

用CSS实现一个简单的动画效果

Tomfriwel
 Tomfriwel
发布于 2015/12/01 20:20
字数 171
阅读 18
收藏 0

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>



© 著作权归作者所有

共有 人打赏支持
Tomfriwel
粉丝 1
博文 2
码字总数 677
作品 0
上海
iOS工程师
React 中常见的动画实现方式

现在,用户对于前端页面的要求已经不能满足于实现功能,更要有颜值,有趣味。除了整体 UI 的美观,在合适的地方添加合适的动画效果往往比静态页面更具有表现力,达到更自然的效果。比如,一个...

sinat_17775997
01/10
0
0
React 中常见动画的实现方式

现在,用户对于前端页面的要求已经不能满足于实现功能,更要有颜值,有趣味。除了整体 UI 的美观,在合适的地方添加合适的动画效果往往比静态页面更具有表现力,达到更自然的效果。比如,一个...

01/10
0
0
关于网页3D切换的优化问题

现在我们看到的很多网页上其实有很多的动画,这些动画实现的效果也是各种各样,这里我总结了几种关于动画的性能优化方案,很有可能不是很完善,但是我觉得已经是我这段时间碰到的所有问题了。...

i5--lou
2016/04/05
18
0
编写自己的代码库(css3常用动画的实现)

1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了,是时候开始封装css3的...

守候i
2017/12/06
0
0
最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1
2012/07/10
4.5K
12

没有更多内容

加载失败,请刷新页面

加载更多

阿里开源的 java 诊断工具—— Arthas

Arthas 是 阿里巴巴最近开源出来的一个针对 java 的工具,主要是针对 java 的问题进行诊断! 一、概述 这个工具可以协助你做下面这些事情: 这个类是从哪个 jar 包加载而来的? 为什么会报各...

xiaomin0322
23分钟前
2
0
去除shell read 读取的最后一个字符

# 读取管道数据cat | while read line; do echo $line # 此时 line包含 \n or \r\ndone# 去除 read 读取的特殊字符line=${line%?} # 去除最后一个字符...

tigerBin
24分钟前
1
0
Qt之listView设置编辑状态

QListView默认是可以编辑的,可以用setEditTrigers设置QListView的条目是否可以编辑,以及如何进入编辑状态。比如: ui->listView->setEditTriggers(QAbstractItemView::DoubleClicked | QAb...

OceanStar
24分钟前
1
0
Linux批量替换

sed -i "s/http://cache.co188.com///image.co188.com/g" grep http:\/\/image.co188.com -rl . *.html sed -i "s/http://cache.co188.com///cache.co188.com/g" grep http:\/\/cache.co188.......

cpaku
34分钟前
1
0
设置plsql永久注册码

填写注册码: Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqz serial Number:601769 password:xs374ca...

小橙子的曼曼
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部