文档章节

用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
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
transform,transition,animation的混合使用——结业篇

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

缘自世界
2017/05/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Qt那些事0.0.9

关于QThread,无F*k说的。文档说的差不多,更多的是看到很多人提到Qt开发者之一的“你TM的做错了(You're doing it wrong...)”,这位大哥2010年写的博客,下面评论很多,但主要还是集中在2...

Ev4n
26分钟前
1
0
constructor / destructor

_attribute__表示属性,是Clang提供的一种源码注释,方便开发者向编译器表达诉求,一般以__attribute__(*)的方式出现在代码中。为了方便使用,一些常用属性被定义成了宏,经常出现在系统头文...

HeroHY
27分钟前
1
0
大数据教程(7.6)shell脚本定时采集日志数据到hdfs

上一篇博客博主分享了hadoop内置rpc的使用案例,本节博主将为小伙伴们分享一个在实际生产中使用的日志搜集案例。前面的文章我们有讲到过用户点击流日志分析的流程,本节就是要完成这个分析流...

em_aaron
55分钟前
1
0
wave和pcm互转

wav->pcm pcm->wav c#代码: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.IO;using Sys......

whoisliang
57分钟前
1
0
Win10:默认的图片打开应用,打开图片时速度明显很慢的解决办法

首先,我们随便地打开一张图片。然后,点击右上角的三个小点,最后点击弹出菜单最下面的“设置”。如下图: 在“设置”中找到下面的“人物”,把它关掉就好了。 原来,默认情况下,Win 10的图...

LivingInFHL
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部