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

jquery物体爆炸效果

代码语言：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 {
.........完整代码请登录后点击上方下载按钮下载查看