【第22期】观点:IT 行业加班,到底有没有价值?

【CSS3】异步动画

原创 2015年07月10日 14:38:16
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation-play-state</title>
	<style>
	#dot,#dot1 {
		position: absolute;
		display: inline-block;
		width: 20px;
		height: 20px;
		top:-20px;
		border-radius: 50%;
		background-color: #389;
		-webkit-animation-play-state: paused;
	}
	#dot{left:0}
	#dot1{right:0}
	#dot.animate {
		left:300px;
		-webkit-animation:fadeIn 2s, float 2s 2s infinite;
		-webkit-animation-play-state: running;
		/*-webkit-animate: shake 4s 2s both infinite paused;  简写在IE10/11中会挂掉*/
	}
	#dot1.animate {
		top:450px;
		-webkit-animation:fadeInr 1.5s, floatr 3s 1.5s infinite;
		-webkit-animation-play-state: running;
	}
	@-webkit-keyframes fadeIn {
		0% {opacity: 0; top:0; left:0;}
		100% {opacity: 1; top:400px; left:300px;}
	}
	@-webkit-keyframes float {
		0% {top: 400px}
		45% {top: 370px}
		100% {top: 400px}
	}

	@-webkit-keyframes fadeInr {
		0% {opacity: 0; top:0; right:0;}
		100% {opacity: 1; top:450px; right:300px;}
	}
	@-webkit-keyframes floatr {
		0% {right: 300px}
		60% {right: 350px}
		100% {right: 300px}
	}
	</style>
</head>

<body>
<a href="javascript:void(0);" onclick="start();" id="start">start</a>
<a  href="javascript:void(0);" onclick="stop();" id="stop" style="display:none">stop</a>

<div id="dot"></div>
<div id="dot1"></div>

<script>
function start() {
	var dot = document.getElementById("dot"),
		dot1 = document.getElementById("dot1"),
		start = document.getElementById("start"),
		stop = document.getElementById("stop");

	start.style.display = "none";
	stop.style.display = "block";

	dot.setAttribute("class","animate");
	dot1.setAttribute("class","animate");
}

function stop() {
	var dot = document.getElementById("dot"),
		dot1 = document.getElementById("dot1"),
		start = document.getElementById("start"),
		stop = document.getElementById("stop");

	start.style.display = "block";
	stop.style.display = "none";

	dot.removeAttribute("class");
	dot1.removeAttribute("class");
}
</script>
</body>
</html>


点击 start 开始动画,stop 结束动画

(PS: 为了节省代码,只写了-webkit-前缀,所以在chrome中测试吧,或者自己加其它前缀 ~。~)


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

jquery ajax 加载数据的时候异步显示加载动画

ajax加载后台数据就不说的那么细了。 看下面代码首先前天加载

css3 transform做动画

css3 transform做动画 第一种用关键帧 这里就不说了 就说第二种方法用 transition属性 ps:jquery anim不支持transform动画 但css还是支持 ...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

css3中创建动画的三种方式详解

1、介绍了css3中三种动画创建的方式; 2、利用JQuery中的Deferred对象编写链式动画。

js(jquery)网页进度条加载n中办法和原理(也有css3动画进度条)

有时候网站内容比较多,或者网络不太好,客户刚打开url看到是空白,内容都在加载中,过一会才能看到网页内容,这样的体验特别糟糕,不耐烦的客户会直接关闭页面,假设能在等待的时候加一些初始动画或者加载进度条...

css3 文字动画效果

CSS3 Animation文字动画特效 - 站长素材 @import url('https://fonts.googleapis.com/css?family=Lato:1...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)