文档章节

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

Tomfriwel
 Tomfriwel
发布于 2015/12/01 20:20
字数 171
阅读 17
收藏 0
点赞 0
评论 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

React 中常见动画的实现方式

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

⋅ 01/10 ⋅ 0

关于网页3D切换的优化问题

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

i5--lou ⋅ 2016/04/05 ⋅ 0

编写自己的代码库(css3常用动画的实现)

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

守候i ⋅ 2017/12/06 ⋅ 0

如何用css3实现风车效果

前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片。虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,...

流浪老三 ⋅ 2013/09/20 ⋅ 0

最新的 Javascript 和 CSS 应用技巧荟萃

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

gbin1 ⋅ 2012/07/10 ⋅ 12

web前端loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现 前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很好的交互体验。 今天这篇文章我们一起来看...

编程需要艺术 ⋅ 2017/12/20 ⋅ 0

程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农 ⋅ 01/08 ⋅ 0

8 款个性化的 jQuery 和 CSS3 菜单

下面要给大家分享8款非常个性化的jQuery和CSS3菜单,这些菜单由于外观比较独特,所以也许不是非常通用,但是我们可以认可的是这些菜单的设计思路非常棒,值得借鉴。下面一起来看看这些菜单吧...

android哥哥 ⋅ 2012/08/22 ⋅ 4

最佳的 HTML5 和 CSS3 教程 - June 2011

Apple.com 导航菜单(只使用CSS3) 该教程将为你展示如何使用 CSS3 创建苹果风格的菜单。 使用 CSS3 的 RGBa 属性处理透明效果 一个简短的教程介绍 CSS3 的透明效果处理 Getting started with...

红薯 ⋅ 2011/06/17 ⋅ 15

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java软件工程师简历中项目经验怎么写?

作者:暗灭 链接:https://www.zhihu.com/question/20695310/answer/180691302 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 直接给你贴个我自己的简历...

颖伙虫 ⋅ 31分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部