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