domlastic实现弹性动画效果代码-html代码-BFW代码库

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;
        }

        .container {
            background-size: cover;
            padding: 30px 20px;
            display: inline-block;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 2px 3px 11px rgba(0, 0, 0, 0.2);
            height: 420px;
            width: 225px;
            position: relative;
            background-color:;
            background: radial-gradient(ellipse atcenter, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
        }

        .container-3, .container-4 {
            width: 490px;
        }

        .container.container-3, .container.container-4 {
            height: 160px;
        }

        .container-1 .listToAnimate {
            position: relative;
            top: 150px;
        }

        .clear {
            clear: both;
        }

        .item {
            padding: 13px 35px;
            border-radius: 4px;
            display: block;
            margin-bottom: 10px;
            margin-right: 5px;
            box-shadow: 2px 3px 11px rgba(0, 0, 0, 0.2);
            font-family: Helvetica;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            width: 150px;
            text-align: center;
        }

        .container-1 .item {
            cursor: inherit;
            display: inline-block;
            width: auto;
            padding: .........完整代码请登录后点击上方下载按钮下载查看