17种不同的点赞按钮动画效果代码

代码语言:html

所属分类:动画

代码描述:17种不同的点赞按钮动画效果代码

代码标签: 点赞 按钮 动画 效果

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

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *,
        *::after,
        *::before {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
            counter-reset: gridcounter;
         
            background: #f0f0f0;;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        a {
            text-decoration: none;
            color: #999;
            outline: none;
        }

        a:hover,
        a:focus {
            color: #000;
            outline: none;
        }

        .container {
            margin: 0 auto;
            overflow: hidden;
        }

        /* Content */


        .grid__item {
            float:left;
            position: relative;

           
            width: 7em;
            height: 7em;
          
        }

       
        /* Icons button */
        .icobutton {
            font-size: 3em;
            position: relative;
            margin: 0;
            padding: 0;
            color: #c0c1c3;
            border: 0;
            background: none;
            overflow: visible;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        .icobutton .fa {
            display: block;
            padding: 0 0.1em;
        }

        .icobutton__text {
            font-size: 0.75em;
            position: absolute;
            top: 100%;
            left: -50%;
            width: 200%;
            text-align: center;
            line-height: 1.5;
            color: #a6a6a6;
        }

        .icobutton__text--side {
            top: 0;
            left: 100%;
            width: 100%;
            width: auto;
            padding: 0 0 0 0.25em;
        }

        /* fix for mo.js */
        .icobutton svg {
            left: 0;
        }

        .icobutton:hover,
        .icobutton:focus {
            outline: none;
        }

        /* Unicorn */
        .icobutton--unicorn svg {
            fill: #c0c1c3;
        }
    </style>

</head>
<body>

    <div class="container">
        <section class="content">
            <ol class="grid">
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--long-arrow-up"><span class="fa fa-long-arrow-up"></span><span class="icobutton__text icobutton__text--side">3</span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--microphone"><span class="fa fa-microphone"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--map-marker"><span class="fa fa-map-marker"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--heart"><span class="fa fa-heart"></span><span class="icobutton__text icobutton__text--side">10</span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--shopping-cart"><span class="fa fa-shopping-cart"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--heart"><span class="fa fa-heart"></span></button>
                </li>
                <li class="grid__item">
                    <button class="icobutton icobutton--unicorn">
                        <svg viewBox="0 0 448.546 448.546" width="86px" height="86px">
                            <path d="M385.7,172.2c-9.7-7.9-19.2-12.4-27.3-14.9c-9.9-3.1-17.5-3.2-20.6-3.2c-16.2,0-32.3,5.5-45.5,15.6c-6,4.6-12.6,8.3-19.5,11c-0.4-56.9-23-110.5-59.3-139.5c-2.3-4.1-5.1-7.9-8.5-11.3l-6-6.1l-4.6,5.2c-14.9-7.2-30.6-9.5-45.7-6.9c-11,2-20.2,9.2-24.6,19.5c-3.1,7.2-3.5,15.2-1.4,22.5c-1.7,0.8-3.3,1.6-4.8,2.6L9.3,1.5l80.4,107.4l-22.6,49.4c-5,10.9-4,23.3,2.6,33.2c6.4,9.5,17,15.2,28.5,15.2c6.1,0,12.2-1.7,17.4-4.8l17.3-10.3c-8.1,18.2-16.9,41-16.9,53.1c0,22.7,7.9,44.7,22.4,61.7c5,6,10.8,11.2,17.1,15.8V450h33h15h42v-110c23.5-2,55.1-15.9,83.1-30.8c-0.1,3.4-0.1,6.4-0.1,9.2V450h32h16h41l-0.6-201.4c0,0-0.6-34.4-8-47.2C401.9,189.5,396.1,180.7,385.7,172.2z M242.6,108.6c9.7,23.5,14.5,49.8,14.1,76.4c-4.1,0.7-8.3,1-12.6,1h-9.4c-2.3-16.2-8.9-56.5-22.2-87.7c5.1-8.3,7.7-17.9,8-27.5C229.2,81.6,236.8,94.4,242.6,108.6z M138.9,48c2.3-5.4,6.9-9.1,12.7-10.1c10.5-1.9,21.2-0.6,31.8,3.7L172.5,54c-1.2,1.1-2.8,1.7-4.8,1.7c-6.8,0-18.5,1.6-29.6,3.9C137,55.8,137.2,51.8,138.9,48z M70.9,57.2l32.5,19.5l-6.2,15.7L70.9,57.2z M107.5,188.2c-2.8,1.7-6,2.6-9.3,2.6c-6.1,0-11.8-3-15.2-8.1c-3.5-5.2-4-12-1.4-17.7l32.3-70.6c4.1-9,12-15.5,21.6-17.9c11.5-2.8,25.4-4.9,32.3-4.9c6.2,0,11.9-2.3,16.1-6.5L199,48c7.9,13.4,7.5,32.2-1.9,44.7l-2.9,3.8l2,4.3c0.6,1.2,1.1,2.5,1.7,3.8c4.2,9.9,4.5,21.3,0,31.1c-3.8,8.3-10.3,15-19.7,19.8c-13.2,6.9-27.2,7.7-27.4,7.7l0,0c-1.3,0.1-2.5,0.5-3.6,1.2L107.5,188.2z M188.4,337.4V409h-17v-77.5C176.8,334,182.5,336,188.4,337.4z M171.4,434v-9h17v9H171.4z M204.4,434v-9h25v9H204.4z M239.9,324.3c-0.7,0-1.4,0-2.1-0.1l-8.4-0.5V409h-25v-84.9l-6.6-1.1c-18.5-3.2-35.3-12.7-47.2-26.9c-12-14.2-18.6-32.5-18.6-51.4c0-10.8,12.4-41,24.6-65.9c6.2-0.8,17.4-3.1,28.5-8.8c9.2-4.7,19.3-12.3,25.8-24.4c6.2,26.1,8.9,48.9,8.9,49.2l0.8,7.1h23.6c21,0,41-6.8,57.8-19.7c10.4-7.9,23.1-12.3,35.7-12.3c6.3,0,12.5,1.1,18.4,3.2c1.9,0.7,3.4,1.3,4.5,2c6.4,3.6,12.2,8,17.3,13.1c15.1,15.1,23.2,30.7,23.2,52l0.1,168.7h-25v-83.4l-4.8-2.1c-10.4-4.5-17.2-14.8-17.2-26.4v-20.9l-12,7C296.8,309.7,260.5,324.3,239.9,324.3z M360.4,335.9V409h-16v-89.3C348.2,326.3,353.7,331.9,360.4,335.9z M344.4,434v-9h16v9H344.4z M376.4,434v-9h25v9H376.4z" />
                            <path d="M161,128.1c7.4-10.7,4.6-25.5-6.1-32.8c-3.9-2.7-8.6-4.1-13.3-4.1c-7.8,0-15.1,3.8-19.5,10.3c-7.4,10.7-4.6,25.5,6.1,32.8c3.9,2.7,8.6,4.1,13.3,4.1h0C149.3,138.4,156.6,134.5,161,128.1z M147.8,119.1c-1.4,2.1-3.8,3.3-6.3,3.3c-1.5,0-3-0.5-4.3-1.3c-3.5-2.4-4.3-7.1-2-10.6c1.4-2.1,3.8-3.3,6.3-3.3c1.5,0,3,0.5,4.3,1.3c1.7,1.1,2.8,2.9,3.2,4.9C149.4,115.4,148.9,117.4,147.8,119.1z" />
                            <path d="M363.3,171.6c-0.6,0-1.2,0-1.9-0.1c-6.6-0.5-18.3-3.7-21.8-9.8c-1.4-2.6-1.6-5.5-0.3-8v0c19.7-39.5,10.4-90.8,10.3-91.3l-2.7-14.4l78.3,37.2l-2.1,6.3c-0.3,0.8-6.8,20.1-17,39.4C391.7,158.2,377.6,171.6,363.3,171.6z M352.7,160.3C352.7,160.3,352.7,160.3,352.7,160.3C352.7,160.3,352.7,160.3,352.7,160.3L352.7,160.3z M355.2,154.9c2,0.7,4.6,1.4,7.4,1.6c0.2,0,0.4,0,0.6,0c13.9,0,33.1-35.7,43.4-63.7l-40.5-19.2C367.7,92,368.1,125.2,355.2,154.9z" /></svg>
                    </button>
                </li>
            </ol>
        </section>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mo.js"></script>
    <script>
        /**
        * demo.js
        * http://www.codrops.com
        *
        * Licensed under the MIT license.
        * http://www.opensource.org/licenses/mit-license.php
        *
        * Copyright 2016, Codrops
        * http://www.codrops.com
        */; (function(window) {

            'use strict';

            // taken from mo.js demos
            function isIOSSafari() {
                var userAgent;
                userAgent = window.navigator.userAgent;
                return userAgent.match(/iPad/i) || userAgent.match(/iPhone/i);
            };

            // taken from mo.js demos
            function isTouch() {
                var isIETouch;
                isIETouch = navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
                return [].indexOf.call(window, 'ontouchstart') >= 0 || isIETouch;
            };

            // taken from mo.js demos
            var isIOS = isIOSSafari(),
            clickHandler = isIOS || isTouch() ? 'touchstart': 'click';

            function extend(a, b) {
                for (var key in b) {
                    if (b.hasOwnProperty(key)) {
                        a[key] = b[key];
                    }
                }
                return a;
            }

            function Animocon(el, options) {
                this.el = el;
                this.options = extend( {}, this.options);
                extend(this.options, options);

                this.checked = false;

                this.timeline = new mojs.Timeline();

                for (var i = 0, len = this.options.tweens.length; i < len; ++i) {
                    this.timeline.add(this.options.tweens[i]);
                }

                var self = this;
                this.el.addEventListener(clickHandler, function() {
                    if (self.checked) {
                        self.options.onUnCheck();
                    } else {
                        self.options.onCheck();
                        self.timeline.start();
                    }
                    self.checked = !self.checked;
                });
            }

            Animocon.prototype.options = {
                tweens: [
                    new mojs.Burst({
                        shape: 'circle',
                        isRunLess: true
                    })
                ],
                onCheck: function() {
                    return false;
                },
                onUnCheck: function() {
                    return false;
                }
            };

            // grid items:
            var items = [].slice.call(document.querySelectorAll('ol.grid > .grid__item'));

            function init() {
                /* Icon 1 */
                var el1 = items[0].querySelector('button.icobutton'), el1span = el1.querySelector('span');
                new Animocon(el1,
                    {
                        tweens: [
                            // burst animation
                            new mojs.Burst({
                                parent: el1,
                                duration: 1700,
                                shape: 'circle',
                                fill: '#C0C1C3',
                                x: '50%',
                                y: '50%',
                                opacity: 0.6,
                                childOptions: {
                                    radius: {
                                        15: 0
                                    }
                                },
                                radius: {
                                    30: 90
                                },
                                count: 6,
                                isRunLess: true,
                                easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                            }),
                            // ring animation
                            new mojs.Transit({
                                parent: el1,
                                duration: 700,
                                type: 'circle',
                                radius: {
                                    0: 60
                                },
                                fill: 'transparent',
                                stroke: '#C0C1C3',
                                strokeWidth: {
                                    20: 0
                                },
                                opacity: 0.6,
                                x: '50%',
                                y: '50%',
                                isRunLess: true,
                                easing: mojs.easing.sin.out
                            }),
                            // icon scale animation
                            new mojs.Tween({
                                duration: 1200,
                                onUpdate: function(progress) {
                                    if (progress > 0.3) {
                                        var elasticOutProgress = mojs.easing.elastic.out(1.43*progress-0.43);
                                        el1span.style.WebkitTransform = el1span.style.transform = 'scale3d(' + elasticOutProgress + ',' + elasticOutProgress + ',1)';
                                    } else {
                                        el1span.style.WebkitTransform = el1span.style.transform = 'scale3d(0,0,1)';
                                    }
                                }
                            })
                        ],
                        onCheck: function() {
                            el1.style.color = '#988ADE';
                        },
                        onUnCheck: function() {
                            el1.style.color = '#C0C1C3';
                        }
                    });
                /* Icon 1 */

                /* Icon 2 */
                var el2 = items[1].querySelector('button.icobutton'), el2span = el2.querySelector('span');
                new Animocon(el2, {
                    tweens: [
                        // burst animation
                        new mojs.Burst({
                            parent: el2,
                            duration: 1500,
                            delay: 300,
                            shape: 'circle',
                            fill: '#C0C1C3',
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            radius: {
                                40: 90
                            },
                            count: 6,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // ring animation
                        new mojs.Transit({
                            parent: el2,
                            duration: 600,
                            type: 'circle',
                            radius: {
                                0: 50
                            },
                            fill: 'transparent',
                            stroke: '#C0C1C3',
                            strokeWidth: {
                                35: 0
                            },
                            opacity: 0.6,
                            x: '50%',
                            y: '50%',
                            isRunLess: true,
                            easing: mojs.easing.ease.inout
                        }),
                        // icon scale animation
                        new mojs.Tween({
                            duration: 1100,
                            onUpdate: function(progress) {
                                if (progress > 0.3) {
                                    var elasticOutProgress = mojs.easing.elastic.out(1.43*progress-0.43);
                                    el2span.style.WebkitTransform = el2span.style.transform = 'scale3d(' + elasticOutProgress + ',' + elasticOutProgress + ',1)';
                                } else {
                                    el2span.style.WebkitTransform = el2span.style.transform = 'scale3d(0,0,1)';
                                }
                            }
                        })
                    ],
                    onCheck: function() {
                        el2.style.color = '#988ADE';
                    },
                    onUnCheck: function() {
                        el2.style.color = '#C0C1C3';
                    }
                });
                /* Icon 2 */

                /* Icon 3 */
                var el3 = items[2].querySelector('button.icobutton'), el3span = el3.querySelector('span');
                new Animocon(el3, {
                    tweens: [
                        // burst animation
                        new mojs.Burst({
                            parent: el3,
                            duration: 1500,
                            delay: 300,
                            shape: 'circle',
                            fill: ['#988ADE',
                                '#DE8AA0',
                                '#8AAEDE',
                                '#8ADEAD',
                                '#DEC58A',
                                '#8AD1DE'],
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            radius: {
                                40: 90
                            },
                            count: 6,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // ring animation
                        new mojs.Transit({
                            parent: el3,
                            duration: 750,
                            type: 'circle',
                            radius: {
                                0: 50
                            },
                            fill: 'transparent',
                            stroke: '#988ADE',
                            strokeWidth: {
                                35: 0
                            },
                            opacity: 0.6,
                            x: '50%',
                            y: '50%',
                            isRunLess: true,
                            easing: mojs.easing.bezier(0, 1, 0.5, 1)
                        }),
                        // icon scale animation
                        new mojs.Tween({
                            duration: 1100,
                            onUpdate: function(progress) {
                                if (progress > 0.3) {
                                    var elasticOutProgress = mojs.easing.elastic.out(1.43*progress-0.43);
                                    el3span.style.WebkitTransform = el3span.style.transform = 'scale3d(' + elasticOutProgress + ',' + elasticOutProgress + ',1)';
                                } else {
                                    el3span.style.WebkitTransform = el3span.style.transform = 'scale3d(0,0,1)';
                                }
                            }
                        })
                    ],
                    onCheck: function() {
                        el3.style.color = '#988ADE';
                    },
                    onUnCheck: function() {
                        el3.style.color = '#C0C1C3';
                    }
                });
                /* Icon 3 */

                /* Icon 4 */
                var el4 = items[3].querySelector('button.icobutton'), el4span = el4.querySelector('span');
                var scaleCurve4 = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
                new Animocon(el4, {
                    tweens: [
                        // burst animation
                        new mojs.Burst({
                            parent: el4,
                            duration: 1500,
                            shape: 'circle',
                            fill: ['#988ADE',
                                '#DE8AA0',
                                '#8AAEDE',
                                '#8ADEAD',
                                '#DEC58A',
                                '#8AD1DE'],
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            childOptions: {
                                radius: {
                                    20: 0
                                }
                            },
                            radius: {
                                40: 120
                            },
                            count: 6,
                            isSwirl: true,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // ring animation
                        new mojs.Transit({
                            parent: el4,
                            duration: 750,
                            type: 'circle',
                            radius: {
                                0: 50
                            },
                            fill: 'transparent',
                            stroke: '#988ADE',
                            strokeWidth: {
                                15: 0
                            },
                            opacity: 0.6,
                            x: '50%',
                            y: '50%',
                            isRunLess: true,
                            easing: mojs.easing.bezier(0, 1, 0.5, 1)
                        }),
                        // icon scale animation
                        new mojs.Tween({
                            duration: 900,
                            onUpdate: function(progress) {
                                var scaleProgress = scaleCurve4(progress);
                                el4span.style.WebkitTransform = el4span.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
                            }
                        })
                    ],
                    onCheck: function() {
                        el4.style.color = '#988ADE';
                    },
                    onUnCheck: function() {
                        el4.style.color = '#C0C1C3';
                    }
                });
                /* Icon 4 */

                /* Icon 5 */
                var el5 = items[4].querySelector('button.icobutton'), el5span = el5.querySelector('span');
                var scaleCurve5 = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
                new Animocon(el5, {
                    tweens: [
                        // burst animation
                        new mojs.Burst({
                            parent: el5,
                            duration: 1500,
                            shape: 'circle',
                            fill: '#988ADE',
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            childOptions: {
                                radius: {
                                    20: 0
                                }
                            },
                            radius: {
                                20: 80
                            },
                            angle: {
                                0: 140
                            },
                            count: 15,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // icon scale animation
                        new mojs.Tween({
                            duration: 800,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
                            onUpdate: function(progress) {
                                var scaleProgress = scaleCurve5(progress);
                                el5span.style.WebkitTransform = el5span.style.transform = 'scale3d(' + progress + ',' + progress + ',1)';
                            }
                        })
                    ],
                    onCheck: function() {
                        el5.style.color = '#988ADE';
                    },
                    onUnCheck: function() {
                        el5.style.color = '#C0C1C3';
                    }
                });
                /* Icon 5 */

                /* Icon 6 */
                var el6 = items[5].querySelector('button.icobutton'), el6span = el6.querySelector('span');
                var scaleCurve6 = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
                new Animocon(el6, {
                    tweens: [
                        // burst animation
                        new mojs.Burst({
                            parent: el6,
                            duration: 1500,
                            shape: 'circle',
                            fill: 'white',
                            x: '50%',
                            y: '50%',
                            childOptions: {
                                radius: {
                                    12: 0
                                },
                                type: 'line',
                                stroke: '#988ADE',
                                strokeWidth: 2
                            },
                            radius: {
                                40: 110
                            },
                            count: 20,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // ring animation
                        new mojs.Transit({
                            parent: el6,
                            duration: 800,
                            type: 'circle',
                            radius: {
                                10: 60
                            },
                            fill: 'transparent',
                            stroke: '#988ADE',
                            strokeWidth: {
                                30: 0
                            },
                            x: '50%',
                            y: '50%',
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // icon scale animation
                        new mojs.Tween({
                            duration: 800,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
                            onUpdate: function(progress) {
                                var scaleProgress = scaleCurve6(progress);
                                el6span.style.WebkitTransform = el6span.style.transform = 'scale3d(' + progress + ',' + progress + ',1)';
                            }
                        })
                    ],
                    onCheck: function() {
                        el6.style.color = '#988ADE';
                    },
                    onUnCheck: function() {
                        el6.style.color = '#C0C1C3';
                    }
                });
                /* Icon 6 */

                /* Icon 7 */
                var el7 = items[6].querySelector('button.icobutton'), el7span = el7.querySelector('span');
                new Animocon(el7, {
                    tweens: [
                        // burst animation
                        new mojs.Burst({
                            parent: el7,
                            duration: 1200,
                            delay: 200,
                            shape: 'circle',
                            fill: '#988ADE',
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            childOptions: {
                                radius: {
                                    'rand(20,5)': 0
                                }
                            },
                            radius: {
                                90: 150
                            },
                            count: 18,
                            isSwirl: true,
                            swirlSize: 15,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // ring animation
                        new mojs.Transit({
                            parent: el7,
                            duration: 1500,
                            type: 'circle',
                            radius: {
                                30: 100
                            },
                            fill: 'transparent',
                            stroke: '#988ADE',
                            strokeWidth: {
                                30: 0
                            },
                            opacity: 0.6,
                            x: '50%',
                            y: '50%',
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        new mojs.Transit({
                            parent: el7,
                            duration: 1600,
                            delay: 320,
                            type: 'circle',
                            radius: {
                                30: 80
                            },
                            fill: 'transparent',
                            stroke: '#988ADE',
                            strokeWidth: {
                                20: 0
                            },
                            opacity: 0.3,
                            x: '50%',
                            y: '50%',
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // icon scale animation
                        new mojs.Tween({
                            duration: 1000,
                            onUpdate: function(progress) {
                                if (progress > 0.3) {
                                    var elasticOutProgress = mojs.easing.elastic.out(1.43*progress-0.43);
                                    el7span.style.WebkitTransform = el7span.style.transform = 'scale3d(' + elasticOutProgress + ',' + elasticOutProgress + ',1)';
                                } else {
                                    el7span.style.WebkitTransform = el7span.style.transform = 'scale3d(0,0,1)';
                                }
                            }
                        })
                    ],
                    onCheck: function() {
                        el7.style.color = '#988ADE';
                    },
                    onUnCheck: function() {
                        el7.style.color = '#C0C1C3';
                    }
                });
                /* Icon 7 */

                /* Icon 8 */
                var el8 = items[7].querySelector('button.icobutton'), el8span = el8.querySelector('span');
                var scaleCurve8 = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
                new Animocon(el8, {
                    tweens: [
                        // burst animation
                        new mojs.Burst({
                            parent: el8,
                            duration: 1600,
                            shape: 'circle',
                            fill: '#988ADE',
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            childOptions: {
                                radius: {
                                    'rand(20,5)': 0
                                }
                            },
                            radius: {
                                50: 110
                            },
                            count: 28,
                            isSwirl: true,
                            swirlSize: 15,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // burst animation
                        new mojs.Burst({
                            parent: el8,
                            duration: 1800,
                            delay: 300,
                            shape: 'circle',
                            fill: '#988ADE',
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            childOptions: {
                                radius: {
                                    'rand(20,5)': 0
                                },
                                type: 'line',
                                stroke: '#988ADE',
                                strokeWidth: 2
                            },
                            angle: {
                                0: 10
                            },
                            radius: {
                                140: 200
                            },
                            count: 18,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // burst animation
                        new mojs.Burst({
                            parent: el8,
                            duration: 2000,
                            delay: 500,
                            shape: 'circle',
                            fill: '#988ADE',
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            childOptions: {
                                radius: {
                                    'rand(20,5)': 0
                                }
                            },
                            radius: {
                                40: 80
                            },
                            count: 18,
                            isSwirl: true,
                            swirlSize: 15,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // burst animation
                        new mojs.Burst({
                            parent: el8,
                            duration: 3000,
                            delay: 750,
                            shape: 'circle',
                            fill: '#988ADE',
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            childOptions: {
                                radius: {
                                    'rand(20,10)': 0
                                }
                            },
                            angle: {
                                0: -10
                            },
                            radius: {
                                90: 130
                            },
                            count: 20,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // icon scale animation
                        new mojs.Tween({
                            duration: 400,
                            easing: mojs.easing.back.out,
                            onUpdate: function(progress) {
                                var scaleProgress = scaleCurve8(progress);
                                el8span.style.WebkitTransform = el8span.style.transform = 'scale3d(' + progress + ',' + progress + ',1)';
                            }
                        })
                    ],
                    onCheck: function() {
                        el8.style.color = '#988ADE';
                    },
                    onUnCheck: function() {
                        el8.style.color = '#C0C1C3';
                    }
                });
                /* Icon 8 */

                /* Icon 9 */
                var el9 = items[8].querySelector('button.icobutton'), el9span = el9.querySelector('span');
                el9span.style.WebkitTransformOrigin = el9span.style.transformOrigin = '-10% 50%';
                new Animocon(el9, {
                    tweens: [
                        // burst animation
                        new mojs.Burst({
                            parent: el9,
                            duration: 1500,
                            delay: 350,
                            shape: 'circle',
                            fill: ['#988ADE',
                                '#DE8AA0',
                                '#8AAEDE',
                                '#8ADEAD',
                                '#DEC58A',
                                '#8AD1DE'],
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            radius: {
                                40: 90
                            },
                            count: 6,
                            angle: 135,
                            degree: 90,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // burst animation
                        new mojs.Burst({
                            parent: el9,
                            duration: 1500,
                            delay: 550,
                            shape: 'circle',
                            fill: ['#988ADE',
                                '#DE8AA0',
                                '#8AAEDE',
                                '#8ADEAD',
                                '#DEC58A',
                                '#8AD1DE'],
                            x: '50%',
                            y: '50%',
                            opacity: 0.6,
                            radius: {
                                40: 100
                            },
                            count: 6,
                            angle: 45,
                            degree: -90,
                            isRunLess: true,
                            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                        }),
                        // ring animation
                        new mojs.Transit({
                            parent: el9,
                            duration: 750,
                            type: 'circle',
                            radius: {
                                0: 50
                            },
                            fill: 'transparent',
                            stroke: '#988ADE',
                            strokeWidth: {
                                35: 0
                            },
                            opacity: 0.6,
                            x: '50%',
                            y: '50%',
                            isRunLess: true,
                            easing: mojs.easing.bezier(0, 1, 0.5, 1)
                        }),
                        // ring animation
                        new mojs.Transit({
                            parent: el9,
                            duration: 750,
                            delay: 200,
                            type: 'circle',
                            radius: {
                                0: 50
                            },
                            fill: 'transparent',
                            stroke: '#988ADE',
                            strokeWidth: {
                                35: 0
                            },
                            opacity: 0.6,
                            x: '50%',
                            y: '50%',
                            isRunLess: true,
                            easing: mojs.easing.bezier(0, 1, 0.5, 1)
                        }),
                        // icon scale animation
                        new mojs.Tween({
                            duration: 1500,
                            onUpdate: function(progress) {
                                if (progress > 0.3) {
                                    var elasticOutProgress = mojs.easing.elastic.out(1.43*progress-0.43);
                                    el9span.style.WebkitTransform = el9span.style.transform = 'scale3d(' + elasticOutProgress + ',' + elasticOutProgress + ',1) rotate3d(0,0,1,' + 90*(1-elasticOutProgress) + 'deg)';
                                } else {
                                    el9span.style.WebkitTransform = el9span.style.transform = 'scale3d(0,0,1)';
                                }
                            }
                        })
                    ],
                    onCheck: function() {
                        el9.style.color = '#988ADE';
                    },
                    onUnCheck: function() {
                        el9.style.color = '#C0C1C3';
                    }
                });
                /* Icon 9 */

                /* Icon 10 */
                var el10 = items[9].querySelector('button.icobutton'), el10span = el10.querySelector('span'), el10counter = el10.querySelector('.........完整代码请登录后点击上方下载按钮下载查看

网友评论0