利用CSS3實現無限循環疊紙背景動畫特效



10 39 14



特效描述:利用CSS3實現 無限循環 疊紙背景 動畫特效,利用CSS3實現無限循環疊紙背景動畫特效

代碼結構

1. HTML代碼

<div id="canvas"></div>
<script>
{
    var injectCSS = function injectCSS(selector, ruleset) {
        // Create style element if it doesn't exist
        var _style = null;
        if (!document.querySelector('style#injectedCSS')) {
            _style = document.createElement('style');
            _style.type = 'text/css';
            _style.id = 'injectedCSS';
            document.getElementsByTagName('head')[0].appendChild(_style);
        } else {
            _style = document.querySelector('style#injectedCSS');
        }
        var _index = _style.sheet.cssRules.length;
        _style.sheet.insertRule(selector + ' { ' + ruleset + ' }', _index);
    };
    var createRow = function createRow(x, y, id) {
        var _row = document.createElement('div');
        _row.style.top = y + 'px';
        _row.style.left = x + 'px';
        _row.classList.add('row');
        _row.setAttribute('id', id);
        container.appendChild(_row);
    };
    var createCard = function createCard(x, y, row, id) {
        var _card = document.createElement('div');
        _card.style.top = y + 'px';
        _card.style.left = x + 'px';
        _card.classList.add('card');
        _card.setAttribute('id', id);
        document.querySelector(row).appendChild(_card);
    };
    // Settings
    // Animation
    var animate = function animate() {
        document.querySelector('#canvas').classList.add('animate');
    };
    var desanimate = function desanimate() {
        document.querySelector('#canvas').classList.remove('animate');
    };
    var app = {
        width: 720,
        height: 460,
        card: {
            ratio: { w: 4, h: 3 },
            blockSize: 40
        },
        animate: {
            active: true,
            speed: 3
        }
        // Init elements
    };var sketch = document.querySelector('#canvas');
    sketch.style.width = app.width + 'px';
    sketch.style.height = app.height + 'px';
    var container = document.createElement('div');
    container.classList.add('container');
    container.id = 'container';
    sketch.appendChild(container);
    var cardWidth = app.card.ratio.w * app.card.blockSize;
    var cardHeight = app.card.ratio.h * app.card.blockSize;
    injectCSS('.card', 'width: ' + cardWidth + 'px; height: ' + cardHeight + 'px');
    var cardsNumX = Math.ceil(app.width / (app.card.ratio.h * app.card.blockSize)) + 2;
    var cardsNumY = Math.ceil(app.height / app.card.blockSize) + 3;
    var colors = ['alpha', 'beta', 'gamma'];
    // Create Elements
    for (var v = 0, i = 0; v < cardsNumY; v++, i++) {
        var _vid = 'row_' + v;
        createRow(-(app.card.blockSize * v), app.card.blockSize * v, _vid);
        for (var h = 0; h < cardsNumX; h++) {
            var _hid = 'r' + v + 'c' + h;
            createCard(app.card.blockSize * (app.card.ratio.w - 1) * h, app.card.blockSize * h, '#' + _vid, _hid);
            injectCSS('#' + _hid, 'z-index: ' + (cardsNumX - h));
            var _className = colors[(h + i % 3) % colors.length];
            document.querySelector('#' + _hid).classList.add('card-' + _className);
        }
        injectCSS('#' + _vid, 'z-index: ' + v + ';');
        // Pyramize it... ˉ\_(ツ)_/ˉ
        if (i % app.card.ratio.h == app.card.ratio.h - 1) {
            cardsNumX++;
        }
    }
    injectCSS('@keyframes card-move', '\n            0% { transform: translateX(0) translateY(0) }\n            15%, 25% { transform: translateX(0) translateY(' + app.card.blockSize + 'px) }\n            40%, 50% { transform: translateX(0) translateY(' + app.card.blockSize * 2 + 'px) }\n            65%, 75% { transform: translateX(' + app.card.blockSize + 'px) translateY(' + app.card.blockSize * 2 + 'px) }\n            90%, 100% { transform: translateX(' + app.card.blockSize + 'px) translateY(' + app.card.blockSize * 3 + 'px) }\n        ');
    injectCSS('.animate .card', 'animation: card-move ' + app.animate.speed + 's infinite ease-in-out;');
    if (app.animate.active) {
        animate();
    }
    // Activate / deactivate onclick
    injectCSS('.container', 'cursor: pointer;');
    document.querySelector('.container').onclick = function () {
        if (!app.animate.active) {
            animate();
        } else {
            desanimate();
        };
        app.animate.active = !app.animate.active;
    };
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 起源蓝宝石721赚钱 6场半全场胜负开奖 41彩票网 30选5 混社会如何赚钱 18选7游戏号码分布图 欢乐湖北麻将透视 王牌手游麻将辅助免费版 今天新疆18选7开奖结果 南昌麻将怎么摸牌 快乐十分开奖结果查询黑龙江 ewin棋牌游戏论坛 山东济宁麻将官网 内蒙古快三开奖直播 北京赛车pk10牛牛推算 jdb电子龙王捕鱼技巧