jquery物体爆炸效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery物体爆炸效果

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background-color:#7df442;
	
}
button{
	margin:10px;
	height:50px;
	width:100px;
	margin-left: 50%;
  margin-top:100px;
	border-radius:15px;
	background-color:orange;
	font-size:20px;
}
.box1 {
  height:430px;
  width:400px;
  background: green;
  background:linear-gradient(#00e64d,#009933);
  position:relative;
	display:inline-block;
  margin-left:30%;
  margin-top:70px;
  border-top-right-radius:150px;
  border-top-left-radius:150px;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
  box-shadow: 10px 0px 5px #888888;
  z-index:-1;
  animation-name:alpha;
  animation-duration:11s;
  animation-iteration-count:infinite;
  
}
#patch1 {
  height:10px;
  width:150px;
  background-color:black;
  position:fixed;
  margin-top:120px;
  margin-left:2px;
  position:relative;
}
#patch2 {
  height:10px;
  width:215px;
  background-color:black;
  position:relative;
  margin-top:-50px;
  margin-left:145px;
  transform: rotate(-25deg);
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  position:relative;
}
#patch3 {
  height:70px;
  width:90px;
  background-color:black;
  margin-left:70px;
  margin-top:20px;
  border-top-right-radius:10px;
  border-top-left-radius:10px;
  border-bottom-right-radius:40px;
  border-bottom-left-radius:40px;
  position:relative;
}
#eye {
  height:50px;
  width:50px;
  background-color:black;
  margin-left:250px;
  border-radius:50px;
  margin-top:-180px;
  box-shadow: 5px 5px 5px #009933;
  position:relative;
}
#mouth1 {
  height:30px;
  width:120px;
  border:10px solid red;
  margin-top:50px;
  margin-left:130px;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  position:relative;
  z-index:1;
}
#leg1 {
  height:100px;
  width:100px;
  background-color:lightblue;
  margin-left:155px;
  margin-top:180px;
  border-top-right-radius:40px;
  border-top-left-radius:40px;
  position:relative;
}
#arm1 {
  height:90px;
  width:100px;
  background-color:#00cc44;
  margin-left:390px;
  margin-top:-310px;
  border-top-right-radius:20px;
  border-bottom-right-radius:20px;
  border-bottom-left-radius:10px;
  border-top-left-radius:10px;
  position:relative;
}
#arm2 {
  height:90px;
  width:100px;
  background-color:#00cc44;
  margin-left:-90px;
  margin-top:-100px;
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:10px;
  border-top-right-radius:10px;
  position:relative;
}
#hair {
  height:100px;
  width:25px;
  background:linear-gradient(#00e64d,#009933);
  margin-top:-250px;
  margin-left:180px;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  border-
  position:relative;
}
#tooth1 {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid white;
  position:relative;
  margin-top:190px;
  margin-left:140px;
  animation-name:blink;
  animation-duration:2s;
  animation-iteration-count:infinite;
}
#tooth2 {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid white;
  position:relative;
  margin-top:-20px;
  margin-left:160px;
  animation-name:blink;
  animation-duration:2s;
  animation-iteration-count:infinite;
}
#tooth3 {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid white;
  position:relative;
  margin-top:-20px;
  margin-left:180px;
  animation-name:blink;
  animation-duration:2s;
  animation-iteration-count:infinite;
}
#tooth4 {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid white;
  position:relative;
  margin-top:-20px;
  margin-left:200px;
  animation-name:blink;
  animation-duration:2s;
  animation-iteration-count:infinite;
}
#tooth5 {
   width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid white;
  position:relative;
  margin-top:-20px;
  margin-left:220px;
  animation-name:blink;
  animation-duration:2s;
  animation-iteration-count:infinite;
}
#tooth6 {
 .........完整代码请登录后点击上方下载按钮下载查看