<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset = "utf-8">
<title>animation</title>
<style type="text/css">
body{
width: 100%;
}
.type{
width: 80px;
height: 80px;
border-radius: 50px;
/*background:-webkit-gradient(radial,25 25,0,25 25,25,from(white),to(black));
background:-moz-gradient(radial,25 25,0,25 25,25,from(white),to(black));*/
background: -webkit-radial-gradient(circle, #ead, white);
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
/*display: none;*/
margin: auto;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: rgb(18,131,207);
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.test{}
</style>
</head>
<body>
<script type="text/javascript" src="/ui/js/jquery-2.1.1.min.js"></script>
<div class="type"></div>
<div class="bounceOut" id="circle"></div>
<div class="test" id="test"></div>
<script type="text/javascript">
$(this).click(function () {
$('div').eq(1).removeClass("bounceOut");
var temp = $('div').eq(1);
var newTemp = temp.clone(true);
temp.after(newTemp);
temp.remove();
newTemp.addClass("bounceOut");
});
</script>
</body>
</html>
web 中重新播放css 动画
最新推荐文章于 2024-08-26 19:16:26 发布