domlastic实现弹性动画效果代码
代码语言:html
所属分类:动画
代码描述:domlastic实现弹性动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html class="demoFrame">
<head lang="en">
<meta charset="UTF-8">
<title>DomLastic.js</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.10.3.min.js"></script>
<!-- domLastic.js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/domlastic.js"></script>
<style>
html {
height: 100%;
background: #373737;
background: radial-gradient(ellipse atcenter, #373737 0%, #222 100%);
background-size: cover;
background-repeat: no-repeat;
}
body {
color: #ccc;
font-family: Menlo;
margin: 0;
padding: 0;
background: #373737;
background: radial-gradient(ellipse atcenter, #373737 0%, #222 100%);
background-size: cover;
background-repeat: no-repeat;
}
h1 {
color: #fff;
}
h2, h3, h4 {
color: #ccc;
font-weight: 100;
}
h2 {
margin: 0 0 5px;
font-size: 14px;
}
h3 {
margin: -10px 0 45px;
font-size: 16px;
}
p {
width: 59%;
margin: auto;
margin-bottom: 40px;
border-bottom: 1px solid #3f3f3f;
font-weight: 100;
padding-bottom: 3px;
font-size: 12px;
}
.demo {
min-height: 95%;
text-align: center;
}
.demoFrame-1-header, .demoFrame-2-header, .demoFrame-3-header {
border-bottom: 1px solid #3f3f3f;
margin-right: 10px;
}
iframe {
overflow: hidden;
height: 730px;
width: 280px;
vertical-align: top;
background-color: transparent;
}
.demoFrame {
background: transparent;
}
.demoFrame-3, .demoFrame-4 {
width: 550px;
}
.demoFrame-3 {
height: 470px;
}
.demoFrame-4 {
height: 330px;
}
.frame-container {
display: inline-block;
position: relative;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0