TweenMax实现新年快乐倒计时动画效果代码-html代码-BFW代码库

TweenMax实现新年快乐倒计时动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax实现新年快乐倒计时动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-title" content="17sucai">

    <style>
        /* latin */
        @font-face {
            font-family: 'Major Mono Display';
            font-style: normal;
            font-weight: 400;
            src: url(//repo.bfw.wiki/bfwrepo/font/RWmVoLyb5fEqtsfBX9PDZIGr2tFubRh7DXeR.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        .holder {
            position: absolute;
          
            left: 0%;
            top: 0%;
            width: 100%;
            height: 100%;
    
    background: url(//repo.bfw.wiki/bfwrepo/image/5e0404c255106.png) no-repeat;
background-size: cover;

        }
        .new-year {
            font-family: 'Major Mono Display', monospace;
              color: white;
            font-size: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            transform: translateX(-50%) translateY(-50%);
            text-align: center;
        }
        .year {
            position: relative;
            left: 50%;
            display: table;
            font-size: 6em;
            transform: translateX(-50%);
        }
        .year2 {
            transform: translateX(-50%) rotateX(180deg);
            opacity: 0.2;
        }
        .digit {
            display: inline-block;
            margin: 0px;
            padding: 0px;
            position: relative;
            opacity: 0;
        }
        .controls {
            margin-top: 30px;
        }
        .control {
            display: inline-block;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 0.8em;
            border-left: 1px solid #333333;
            opacity: 0;
            position: relative;
            top: 100px;
        }
        .control:first-child {
            border-left: none;
        }
        .triangles {
            position: absolute;
            left: 0%;
            top: 0%;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .triangle {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid white;
            position: absolute;
            opacity: 0;
        }
    </style>



</head>

<body>
    <div class="holder">
        <div class="new-year">

        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        /* Timelines could have been written in a better way, I am sorry if I wrote them in a hurry. :D */
        (function () {
            var animation = {
                newYear: document.querySelector(".new-year"),
                range: function (min, max) {
                    return Math.floor(Math.random() * (max - min + 1) + min);
                },
                get period() {
                    var dateFuture = new Date(new Date().getFullYear() + 1, 0, 1);
                    var dateNow = new Date();
                    var seconds = Math.floor((dateFuture - dateNow) / 1000);
                    var minutes = Math.floor(seconds / 60);
                    var hours = Math.floor(minutes / 60);
                    var days = Math.floor(hours / 24);
                    hours = hours - days * 24;
                    minutes = minutes - days * 24 * 60 - hours * 60;
                    seconds = seconds - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;
                    return {
                        year: new Date().getFullYear() + 1,
                        days: days,
                        hours: hours,
                        minutes: minutes,
                        seconds: seconds };
    
                },
                element: function (parent, type, className, html) {
                    var element = document.createElement(type);
                    element.className = className;
                    if (typeof html !== "undefined") element.innerHTML = html;
                    parent.appendChild(element);
                    return element;
                },
                year: function (className) {
                    var timeline = new TimelineMax();
                    var year = animation.element(animation.newYear, "div", className);
              .........完整代码请登录后点击上方下载按钮下载查看