HTML5CSS动画如何点击一下就立即结束动画
kuaidi.ping-jia.net 作者：佚名 更新日期：2024-08-22
html5 css3 js 动画 点击气泡后 气泡会爆炸
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画暂停测试</title>
<style>
#test{
width:200px;
height:200px;
position:relative;
background:red;
animation:move 5s alternate infinite;
}
@keyframes move{
0%{left:0;background:red;}
100%{left:600px;background:green;}
}
</style>
<script>
function start(){
var x=document.getElementById('test');
x.style.animationPlayState="running";
}
function end(){
var y=document.getElementById('test');
y.style.animationPlayState="paused";
}
</script>
</head>
<body>
<div id="test"></div>
<button onclick="start()">开始动画</button>
<button onclick="end()">结束动画</button>
</body>
</html>
如果要爆炸效果，替换相应图片即可。
参考：http://www.iteye.com/topic/1112322
1、scale(x,y) 对元素进行缩放
X表示水平方向缩放的倍数 Y表示垂直方向的缩放倍数
Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
transform:scale(2,2.5);
2、scaleX() 元素只在X轴（水平方向）缩放元素。
默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点
transform:scaleX(2);
3、scaleY() 元素只在Y轴（垂直方向）缩放元素。
基点一样在元素的中心位置。可以通过transform-origin来改变基点。
transform:scaleY(2);
最后我们看看兼容性写法：
.test{-moz-transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2);background:url(img/i.png) no-repeat;width:198px;height:133px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画暂停测试</title>
<style>
#test{
width:200px;
height:200px;
position:relative;
background:red;
animation:move 5s alternate infinite;
}
@keyframes move{
0%{left:0;background:red;}
100%{left:600px;background:green;}
}
</style>
<script>
function start(){
var x=document.getElementById('test');
x.style.animationPlayState="running";
}
function end(){
var y=document.getElementById('test');
y.style.animationPlayState="paused";
}
</script>
</head>
<body>
<div id="test"></div>
<button onclick="start()">开始动画</button>
<button onclick="end()">结束动画</button>
</body>
</html>
