文档章节

用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>



© 著作权归作者所有

共有 人打赏支持
上一篇: linux httpd+php
下一篇: linux httpd+php
Tomfriwel
粉丝 1
博文 2
码字总数 677
作品 0
上海
iOS工程师
私信 提问
React 中常见的动画实现方式

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

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

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

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

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

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

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

守候i
2017/12/06
0
0
transform,transition,animation的混合使用——结业篇

css动画的动画制作没有什么特别高深的地方,引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的,但我想要强调的是掌握并深入的理解css的基础,以及灵活的运用是做...

缘自世界
2017/05/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
7
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
2
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部