13个有趣的HTML5 CSS3打字动画

animated letters + text editor：包括淡入淡出、滚动、飘雪、转环、漂浮、弹跳、陨石、气泡等。

h5, css3, 文本动画

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3689
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

const util = {
    math: {
        degToRad: alpha => alpha * Math.PI / 180,

polarToDecart: (alpha, r) => {
            alpha = this.degToRad(alpha);
            return {
                x: r * Math.cos(alpha),
                y: r * Math.sin(alpha)
            };
        }
    },

color: {
        random: (opts = {}) => {
            let h, s, l;

h = opts.hue || Math.floor(Math.random() * 360);
            s = opts.saturation || Math.floor(Math.random() * 101);
            l = opts.lightness || Math.floor(Math.random() * 101);

return `hsl(${h}, ${s}%, ${l}%)`;
        }
    }
};

/**
 * Make a contenteditable element more controllable
 */
class FunkyLetters {
    /**
     * Constructor
     * @param  {Element} el  document element with contenteditable=true or selector
     * @param  {Object} [opts] options
     */
    constructor(el, opts = {}) {
        if (typeof el == 'string') {
            el = document.querySelector(el);
        }
        this.container = el;
        this.options = opts;
        this._splitLetters();
        this._listenToInput();
    }

/**
     * Split container's text into one letter spans optionally colored
     */
    _splitLetters() {
        this.container.innerHTML = FunkyLetters.splitTextLetters(this.container.textContent, this.options);
    }

/**
     * Split the text into one letter spans
     * @param  {string} text input text
     * @param  {Object} [opts] options
     * @return {string}      html with text split into letters
     */
    static splitTextLetters(text, opts = {}) {
        let letters;

text = text.replace(/\s+/, ' ');
        letters = text.split(/(?=.)/);

return letters.reduce((a, b) => a + FunkyLetters.makeLetterHtml(b, opts), '');
    }

/**
     * Generate html string for a letter
     * @param  {string} letter single letter
     * @param  {Object} [opts]   options
     * @return {string}        html string
     */
    static makeLetterHtml(letter, opts = {}) {
        let style = '',
            className = 'char';

if (/\s/.test(letter)) {
            letter = '&nbsp;';
            className += ' space';
        } else {
            className += ' letter';
        }
        if (opts.colorize) {
            style += 'color:' + util.color.random({
                saturation: 100,
                lightness: 50
            }) + ';';
        }

return `<span class="${className}" ${style && 'style="' + style + '"'}><span class="letter-inner">${letter}</span></span>`;
    }

/**
     * Watch input
     */
    _listenToInput() {
        let me = this;
        // this.container.dataset.text = this.container.textContent;

this.container.addEventListener('keydown', function(e) {
            let letterEl = me.getFocusLetter();

if (e.key.length === 1 && !e.altKey && !e.ctrlKey) {
                e.preventDefault();
                me.insertText(e.key);
                return;
            }

// If the container is empty
            if (!letterEl) return;

switch (e.key) {
                // Firefox focuses in two steps on inline-block elements
                case 'ArrowRight':
                    if (navigator.userAgent.indexOf('AppleWebKit') !== -1) break;
                    if (!letterEl.nextElementSibling) break;
                    e.preventDefault();
                    me.setFocus(letterEl.nextElementSibling, 1);
                    break;

case 'ArrowLeft':
                    if (navigator.userAgent.indexOf('AppleWebKit') !== -1) break;
                    e.preventDefault();
                    if (!letterEl.previousElementSibling) {
                        me.setFocus(letterEl, 0);
                    } else {
                        me.setFocus(letterEl.previousElementSibling, 1);
                    }
                    break;

case 'ArrowUp':
                case 'ArrowDown':
                    e.preventDefault();
                    break;

case 'Home':
                case 'PageUp':
                    e.preventDefault();
                    me.setFocus(this.firstElementChild, 0);
                    break;

case 'End':
                case 'PageDown':
                    e.preventDefault();
                    me.setFocus(this.lastElementChild, 1);
                    break;
            }
        });

this.container.addEventListener('input', function(e) {
            // Firefox leaves empty containers when text is deleted. Make sure those are deleted too.
            me._cleanEmpty();
        });

this.container.addEventListener('paste', function(e) {
            if (e.clipboardData.types.indexOf('text/plain') != -1) {
                e.preventDefault();
                me.insertText(e.clipboardData.getData('text/plain'));
            }
        });
    }

/**
     * Format text and insert it into the container at the caret position
     * @param  {string} text the text to insert
     */
    insertText(text) {
        let sel = document.getSelection(),
            range = document.createRange(),
            node = this.getFocusLetter(),
            isBeforeNode = sel.focusOffset === 0;

sel.deleteFromDocument();
        if (!node) {
            this.container.insertAdjacentHTML('afterbegin', FunkyLetters.splitTextLetters(text, this.options));
            this.setFocus(Array.from(this.container.querySelectorAll('.char')).pop(), 1);
        } else if (isBeforeNode) {
            node.insertAdjacentHTML('beforebegin', FunkyLetters.splitTextLetters(text, this.options));
            this.setFocus(node.previousElementSibling, 1);
        } else {
            node.insertAdjacentHTML('afterend', FunkyLetters.splitTextLetters(text, this.options));
            for (let i = text.length; i > 0 && node.nextElementSibling; i--) {
                node = node.nextElementSibling;
            }
            this.setFocus(node, node.textContent.length);
        }

this.container.dataset.changed = true;
        this._cleanEmpty();
    }

/**
     * Get the character in focus (at caret position)
     * @return {Element} the element node in focus
     */
    getFocusLetter() {
        const sel = document.getSelection();
        return sel.anchorNode.closest ? sel.anchorNode.closest('.char') : sel.anchorNode.parentElement.closest('.char');
    }

/**
     * Set cursor position
     * @param {Element} node   letter element to focus on
     * @param {Integer} offset offset. In our case, either 0 or 1
     */
    setFocus(node, offset) {
        const sel = document.getSelection(),
            range = document.createRange();

range.setStart(node, offset);
        sel.removeAllRanges();
        sel.addRange(range);
    }

/**
     * Delete elements other than .char the browser could have generated
     */
    _cleanEmpty() {
        const focusLetter = this.getFocusLetter();
        Array.from(this.container.children).forEach(el => {
            if (el.classList.contains('char') && el.textContent) return;
            if (el === focusLetter) {
                if (el.previousElementSibling) {
                    this.setFocus(el, 1);
                } else if (el.nextElementSibling) {
                    this.setFocus(el.nextElementSibling, 1);
                }
            }
            el.remove();
        });
    }
}

/**
 * Control animations of an element's children
 */
class Animator {
    /**
     * Constructor
     * @param  {Element|string} el the container element whose children are being animated
     */
    constructor(el) {
        this.container = el;
        this._removeClassTimer = null;

// this.container.addEventListener('animationend', () => {
        // 	clearTimeout(this._removeClassTimer);
        // 	this._removeClassTimer = setTimeout(() => {
        // 		this.container.classList.remove('anim');
        // 	}, 900);
        // });
    }

/**
     * Run animation using the effect
     * @param  {string} effect effect name
     */
    animate(effect) {
        const cont = this.container;
        if (cont.classList.contains('anim')) {
            cont.classList.remove('anim');
            setTimeout(() => {
                this.animate(effect);
            }, 50);
            return;
        }
        clearTimeout(this._removeClassTimer);
        cont.classList.add('anim');
        if (cont.dataset.effect === effect && !('changed' in cont.dataset)) return;
        cont.dataset.effect = effect;
        delete cont.dataset.changed;
        // if(effect !== 'converge'/* && effect !== 'spiral'*/ && effect !== 'meteorite') {
        // 	Array.prototype.forEach.call(cont.children, function(el) {
        // 		el.style.transform = '';
        // 	});
        // }
        if (!Animator.effects[effect]) {
            throw new Error(`Animator: effect ${effect} is not defined`);
        }
        if (Animator.effects[effect].delays) {
            this.distributeDelays(Animator.effects[effect].delays);
        } else {
            this.distributeDelays({
                shift: false
            });
        }
    }

/**
     * Distribute animation delays
     * @param  {Object} opts           options
     * @param  {Object} opts.shift     shift each next item this much milliseconds
     * @param  {Object} [opts.random]  distribute delays randomly: without regard to document order
     * @param  {Object} [opts.reverse] distribute delays in reverse document order starting with the last element
     */
    distributeDelays(opts) {
        let shift = opts.shift != null ? opts.shift : 100,
            curShift = 0,
            els = Array.from(this.container.children);

if (opts.random) {
            let newEls = [];
            for (let j = 0, l = els.length; j < l; j++) {
                let i = Math.floor(Math.random() * els.length);
                newEls.push(els.splice(i, 1)[0]);
            }
            els = newEls;
        }
        if (opts.reverse) {
            els = els.reverse();
        }

els.forEach(el => {
            curShift += typeof shift == 'object' ? Math.round(Math.random() * (shift.max - shift.min) + shift.min) : shift;
            el.style.animationDelay = el.querySelector('.letter-inner').style.animationDelay = '';
            if (shift === false) return;
            el.style.animationDelay = (parseFloat(getComputedStyle(el, null).animationDelay) + curShift / 1000) + 's';
            el.querySelector('.letter-inner').style.animationDelay = (parseFloat(getComputedStyle(el.querySelector('.letter-inner'), null).animationDelay) + curShift / 1000) + 's';
        });
    }

/**
     * Distribute children's offset positions
     * We are currently doing this in Sass
     * @param  {Object} opts options
     */
    distributeOffsets(opts) {
        let coords,
            alpha = opts.minAngle || 0,
            x = 100,
            y = 100,
            els = this.container.children;

for (let i = 0; i < els.length; i++) {
            if (opts.dx || opts.dy) {
                x -= opts.dx || 0;
                y -= opts.dy || 0;
            } else {
                if (opts.random) {
                    alpha = Math.random * (opts.maxAngle || 360 - opts.minAngle || 0) + opts.minAngle || 0;
                    coords = util.math.polarToDecart(alpha, 100);
                } else {
                    coords = util.math.polarToDecart(alpha, 100);
                    alpha += opts.dAlpha;
                }
                x = coords.x;
                y = coords.y;
            }
            els[i].style.transform = 'translate(' + x.toFixed(3) + 'vmax,' + y.toFixed(3) + 'vmax)';
        }
    }
}
/**
 * The available animation effects and their settings
 * @type {Object}
 */
Animator.effects = {
    roll: {
        delays: {
            shift: 100
        }
    },
    slide: {
        delays: {
            shift: 100
        }
    },
    swivel: {
        delays: {
            shift: 100,
            random: true
        }
    },
    peel: {
        delays: {
            shift: 70
        }
    },
    wave: {
        delays: {
            shift: 30
        }
    },
    wave2: {
        delays: {
            shift: 120
        }
    },
    hop: {
        delays: {
            shift: 140
        }
    },
    converge: {
        delays: {
            shift: false
        }
    },
    fade: {
        delays: {
            shift: 80,
            random: true
        }
    },
    snow: {
        delays: {
            shift: 600,
            random: true
        }
    },
    spiral: {
        delays: {
            shift: 100
        }
    },
    meteorite: {
        delays: {
            shift: 50,
            random: true
        }
    },
    bounce: {
        delays: {
            shift: 200,
            random: true
        }
    },
    float: {
        delays: {
            shift: 400,
            random: true
        }
    },
    bubble: {
        delays: {
            shift: {
                min: 200,
                max: 500
            },
            random: true
        }
    },
};

const animationContainer = document.querySelector('.anim-text');

let config = localStorage['funkyLetters:config'];
try {
    config = JSON.parse(config);
} catch (e) {
    config = {
        completed: {}
    };
}

// Tips
if (config.completed.changeEffect) {
    document.querySelector('.tip-effect').classList.add('hide');
} else {
    document.querySelector('#selectEffect').addEventListener('change', () => {
        document.querySelector('.tip-effect').classList.add('hide');
        config.completed.changeEffect = true;
        localStorage['funkyLetters:config'] = JSON.stringify(config);
    }, {
        once: true
    });
}

if (config.completed.type) {
    document.querySelector('.tip-type').classList.add('hide');
} else {
    animationContainer.addEventListener('keydown', () => {
        document.querySelector('.tip-type').classList.add('hide');
        config.completed.type = true;
        localStorage['funkyLetters:config'] = JSON.stringify(config);
    }, {
        once: true
    });
}

if (config.completed.comeBack) {
    document.querySelector('.alert-come-back').classList.add('hide');
}

new FunkyLetters(animationContainer, {
    colorize: true
});

const animator = new Animator(animationContainer);
animator.animate(document.querySelector('#selectEffect').value);

// Listen to controls
document.querySelector('#selectEffect').addEventListener('change', function(e) {
    animator.animate(this.value);
});
document.querySelector('.animate').addEventListener('click', function(e) {
    animator.animate(document.querySelector('#selectEffect').value);
});

// Animate on enter key
animationContainer.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 13:
            e.preventDefault();
            document.querySelector('.animate').focus();
            document.querySelector('.animate').click();
            break;
    }
});

// Other
document.querySelector('.dismiss').addEventListener('click', function(e) {
    this.closest('.alert').classList.add('close');
    config.completed.comeBack = true;
    localStorage['funkyLetters:config'] = JSON.stringify(config);
});

编译

CSS

@import "https://fonts.googleapis.com/css?family=Baloo+Chettan|Gloria+Hallelujah";
html,
body,
.anim-wrap {
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    font-family: Helvetica Neueu, HelveticaNeueu, Helvetica, Arial, sans-serif;
    overflow: hidden;
}
.anim-wrap {
    position: absolute;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.anim-text {
    font: 4em "Baloo Chettan", Helvetica Neueu, HelveticaNeueu, Helvetica, Arial;
    white-space: nowrap;
    min-width: 1em;
    min-height: 1.2em;
    border-bottom: 1px solid transparent;
    caret-color: #f20dcc;
}
.anim-text:empty,
.anim-text:focus {
    border-bottom-color: #f20dcc;
    outline: none;
}
.char {
    position: relative;
    margin: 0 .05em;
}
.char,
.letter-inner {
    display: inline-block;
}
.anim[data-effect=fade] > .letter {
    animation: fadeIn 1.5s backwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(2);
    }
}
.anim[data-effect=slide] > .letter {
    animation: slide 1s backwards;
    transform-origin: bottom left;
}
@keyframes slide {
    0% {
        transform: translateX(90vw) skew(-17deg) scaleX(3);
        animation-timing-function: ease-in;
    }
    80% {
        transform: translateX(0) skew(-17deg) scaleX(3);
        animation-timing-function: ease-out;
    }
    88% {
        transform: translateX(0) skew(12deg) scaleX(0.8);
        animation-timing-function: ease-in-out;
    }
    95% {
        transform: translateX(0) skew(-5deg) scaleX(1);
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: translateX(0) skew(0deg) scaleX(1);
        animation-timing-function: ease-in-out;
    }
}
@keyframes slideIn {
    from {
        transform: translateX(70vw);
    }
}
.anim[data-effect=roll] > .letter {
    animation: rollIn 1.1s cubic-bezier(0, 0, 0.6, 1) backwards;
}
@keyframes rollIn {
    from {
        transform: translateX(90vw) rotate(1200deg);
    }
}
.anim[data-effect=peel] > .letter {
    animation: peelIn 2s backwards ease-in-out;
}
.anim[data-effect=peel] > .letter > .letter-inner {
    animation: rotateY 1.3s 0.7s backwards ease-in;
}
@keyframes peelIn {
    from {
        transform: translate(-100vw, 0);
    }
}
@keyframes rotateY {
    from {
        transform: scale(3) rotateY(180deg);
    }
}
.anim[data-effect=swivel] > .letter:not(.space)::before {
    background: currentColor;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .2;
}
.anim[data-effect=swivel] {
    perspective: 100vmax;
    perspective-origin: top;
}
.anim[data-effect=swivel] > .letter {
    padding: 0 .1em;
    animation: swivel 5s backwards;
    transform-origin: top;
}
@keyframes swivel {
    0% {
        transform: rotateX(-90deg);
    }
    10% {
        transform: rotateX(82deg);
    }
    20% {
        transform: rotateX(-74deg);
    }
    30% {
        transform: rotateX(66deg);
    }
    39% {
        transform: rotateX(-58deg);
    }
    48% {
        transform: rotateX(50deg);
    }
    56% {
        transform: rotateX(-42deg);
    }
    63% {
        transform: rotateX(35deg);
    }
    70% {
        transform: rotateX(-28deg);
    }
    77% {
        transform: rotateX(21deg);
    }
    83% {
        transform: rotateX(-15deg);
    }
    89% {
        transform: rotateX(9deg);
    }
    95% {
        transform: rotateX(-4deg);
    }
    100% {
        transform: none;
    }
}
.anim[data-effect=hop] > .letter {
    animation: slideIn 2s linear backwards;
}
.anim[data-effect=hop] > .letter > .letter-inner {
    animation: hop .1s 20 alternate;
}
@keyframes hop {
    to {
        transform: translateY(-0.6em);
    }
}
.anim[data-effect=wave] {
    animation: slideIn 3s linear backwards;
}
.anim[data-effect=wave] > .letter {
    animation: hop .15s 20 alternate;
}
.anim[data-effect=wave2] {
    animation: slideIn 3s linear backwards;
}
.anim[data-effect=wave2] > .letter {
    animation: inflate .5s 6 linear alternate;
}
@keyframes inflate {
    to {
        transform: scale(2);
    }
}
.anim[data-effect=converge] > .letter {
    animation: converge 2.5s forwards;
}
.anim[data-effect=converge] > .letter:nth-child(1n) {
    transform: translate(48vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(2n) {
    transform: translate(14vw, 100vh);
}
.anim[data-effect=converge] > .letter:nth-child(3n) {
    transform: translate(100vw, 42vh);
}
.anim[data-effect=converge] > .letter:nth-child(4n) {
    transform: translate(100vw, -68vh);
}
.anim[data-effect=converge] > .letter:nth-child(5n) {
    transform: translate(84vw, 100vh);
}
.anim[data-effect=converge] > .letter:nth-child(6n) {
    transform: translate(57vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(7n) {
    transform: translate(96vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(8n) {
    transform: translate(-100vw, 8vh);
}
.anim[data-effect=converge] > .letter:nth-child(9n) {
    transform: translate(-100vw, 91vh);
}
.anim[data-effect=converge] > .letter:nth-child(10n) {
    transform: translate(72vw, 100vh);
}
.anim[data-effect=converge] > .letter:nth-child(11n) {
    transform: translate(-100vw, 71vh);
}
.anim[data-effect=converge] > .letter:nth-child(12n) {
    transform: translate(55vw, 100vh);
}
.anim[data-effect=converge] > .letter:nth-child(13n) {
    transform: translate(-39vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(14n) {
    transform: translate(57vw, 100vh);
}
.anim[data-effect=converge] > .letter:nth-child(15n) {
    transform: translate(53vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(16n) {
    transform: translate(66vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(17n) {
    transform: translate(100vw, 71vh);
}
.anim[data-effect=converge] > .letter:nth-child(18n) {
    transform: translate(100vw, 1vh);
}
.anim[data-effect=converge] > .letter:nth-child(19n) {
    transform: translate(-100vw, -43vh);
}
.anim[data-effect=converge] > .letter:nth-child(20n) {
    transform: translate(-36vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(21n) {
    transform: translate(-72vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(22n) {
    transform: translate(100vw, 69vh);
}
.anim[data-effect=converge] > .letter:nth-child(23n) {
    transform: translate(-23vw, 100vh);
}
.anim[data-effect=converge] > .letter:nth-child(24n) {
    transform: translate(-100vw, -89vh);
}
.anim[data-effect=converge] > .letter:nth-child(25n) {
    transform: translate(100vw, 34vh);
}
.anim[data-effect=converge] > .letter:nth-child(26n) {
    transform: translate(-70vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(27n) {
    transform: translate(57vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(28n) {
    transform: translate(-75vw, -100vh);
}
.anim[data-effect=converge] > .letter:nth-child(29n) {
    transform: translate(-100vw, -89vh);
}
.anim[data-effect=converge] > .letter:nth-child(30n) {
    transform: translate(68vw, -100vh);
}
@keyframes converge {
    to {
        transform: translate(0, 0);
    }
}
.anim[data-effect=spiral] > .letter {
    animation: spiral 3s ease-in both;
}
@keyframes spiral {
    from {
        transform: rotate(720deg) translateY(-60vmax);
    }
}
.anim[data-effect=snow] > .letter {
    animation: snow 5s cubic-bezier(0.68, 0.21, 0.7, 1) both;
}
.anim[data-effect=snow] > .letter > .letter-inner {
    animation: sway 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 5 alternate;
}
@keyframes snow {
    from {
        transform: translateY(-60vh);
    }
}
@keyframes sway {
    from {
        transform: translate(2em, 0);
    }
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .char {
    margin: 0 .15em;
    animation: 0.5s cubic-bezier(0.33, 0.08, 0.7, 0.32) forwards;
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 1) {
    animation-name: meteorite;
    transform: translate(0.51259vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 1) > .letter-inner {
    transform: translate(0.09022em, 0.10561em) rotate(-0.05429deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 2) {
    animation-name: meteorite;
    transform: translate(-17.76809vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 2) > .letter-inner {
    transform: translate(-0.03405em, 0.09565em) rotate(-3.83867deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 3) {
    animation-name: meteorite;
    transform: translate(-14.61705vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 3) > .letter-inner {
    transform: translate(-0.03829em, -0.14901em) rotate(4.95968deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 4) {
    animation-name: meteorite;
    transform: translate(-5.27722vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 4) > .letter-inner {
    transform: translate(-0.01088em, -0.02144em) rotate(-8.82985deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 5) {
    animation-name: meteorite;
    transform: translate(-2.94908vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 5) > .letter-inner {
    transform: translate(0.0289em, -0.02673em) rotate(1.02342deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 6) {
    animation-name: meteorite;
    transform: translate(-19.93937vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 6) > .letter-inner {
    transform: translate(0.00791em, 0.13187em) rotate(3.40033deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 7) {
    animation-name: meteorite;
    transform: translate(-18.41176vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 7) > .letter-inner {
    transform: translate(0.02052em, -0.12027em) rotate(8.75196deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 8) {
    animation-name: meteorite;
    transform: translate(18.63734vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 8) > .letter-inner {
    transform: translate(0.01078em, -0.01761em) rotate(0.54215deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 9) {
    animation-name: meteorite;
    transform: translate(5.16004vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 9) > .letter-inner {
    transform: translate(-0.009em, 0.07em) rotate(-2.20001deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 10) {
    animation-name: meteorite;
    transform: translate(23.18546vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 10) > .letter-inner {
    transform: translate(0.00377em, 0.12942em) rotate(3.55959deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 11) {
    animation-name: meteorite;
    transform: translate(21.70081vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 11) > .letter-inner {
    transform: translate(-0.08897em, -0.12315em) rotate(0.95156deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 12) {
    animation-name: meteorite;
    transform: translate(-13.28052vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 12) > .letter-inner {
    transform: translate(0.00573em, 0.13299em) rotate(-2.40944deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 13) {
    animation-name: meteorite;
    transform: translate(16.57191vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 13) > .letter-inner {
    transform: translate(0.02574em, 0.14527em) rotate(-1.8103deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 14) {
    animation-name: meteorite;
    transform: translate(12.22502vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 14) > .letter-inner {
    transform: translate(0.03217em, -0.09779em) rotate(-7.83269deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 15) {
    animation-name: meteorite;
    transform: translate(-21.76815vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 15) > .letter-inner {
    transform: translate(-0.01438em, 0.14977em) rotate(1.96125deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 16) {
    animation-name: meteorite;
    transform: translate(1.9588vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 16) > .letter-inner {
    transform: translate(0.08326em, 0.06728em) rotate(2.9922deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 17) {
    animation-name: meteorite;
    transform: translate(15.07623vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 17) > .letter-inner {
    transform: translate(-0.07444em, 0.11676em) rotate(-2.0788deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 18) {
    animation-name: meteorite;
    transform: translate(-13.59082vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 18) > .letter-inner {
    transform: translate(0.08043em, -0.01885em) rotate(1.8619deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 19) {
    animation-name: meteorite;
    transform: translate(-6.8584vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 19) > .letter-inner {
    transform: translate(0.03331em, -0.10375em) rotate(-0.07669deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 20) {
    animation-name: meteorite;
    transform: translate(-17.52634vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 20) > .letter-inner {
    transform: translate(-0.08563em, 0.1026em) rotate(5.67853deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 21) {
    animation-name: meteorite;
    transform: translate(-6.54341vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 21) > .letter-inner {
    transform: translate(-0.03418em, -0.11103em) rotate(-5.12deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 22) {
    animation-name: meteorite;
    transform: translate(0.17846vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 22) > .letter-inner {
    transform: translate(-0.04664em, 0.03804em) rotate(-0.05872deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 23) {
    animation-name: meteorite;
    transform: translate(4.80072vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 23) > .letter-inner {
    transform: translate(-0.02497em, -0.08255em) rotate(6.24591deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 24) {
    animation-name: meteorite;
    transform: translate(-0.12569vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 24) > .letter-inner {
    transform: translate(0.08634em, -0.00694em) rotate(4.80277deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 25) {
    animation-name: meteorite;
    transform: translate(-23.03569vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 25) > .letter-inner {
    transform: translate(0.03655em, -0.04087em) rotate(-8.35269deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 26) {
    animation-name: meteorite;
    transform: translate(-16.59565vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 26) > .letter-inner {
    transform: translate(-0.06355em, 0.0452em) rotate(4.92943deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 27) {
    animation-name: meteorite;
    transform: translate(-17.55545vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 27) > .letter-inner {
    transform: translate(-0.04358em, 0.10322em) rotate(-0.89539deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 28) {
    animation-name: meteorite;
    transform: translate(23.20978vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 28) > .letter-inner {
    transform: translate(-0.08407em, 0.01497em) rotate(-0.2574deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 29) {
    animation-name: meteorite;
    transform: translate(-7.91028vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 29) > .letter-inner {
    transform: translate(0.06676em, -0.13523em) rotate(-0.98874deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 30) {
    animation-name: meteorite;
    transform: translate(-10.48382vw, -60vh);
}
.anim[data-effect=meteorite] > .letter:nth-child(30n + 30) > .letter-inner {
    transform: translate(0.09334em, 0.14452em) rotate(-3.76442deg);
}
@keyframes meteorite {
    to {
        transform: none;
    }
}
.anim[data-effect=bounce] > .letter {
    animation: bounce 2s ease-in both;
}
@keyframes bounce {
    0% {
        transform: translateY(-60vh);
        animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    37% {
        transform: none;
        animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
    55% {
        transform: translateY(-25vh);
        animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    73% {
        transform: none;
        animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
    81% {
        transform: translateY(-10vh);
        animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    89% {
        transform: none;
        animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
    93% {
        transform: translateY(-4vh);
        animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    97% {
        transform: none;
        animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
    98.5% {
        transform: translateY(-1.1vh);
        animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    100% {
        transform: none;
        animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
}
.anim[data-effect=float] > .letter {
    animation: float 18s ease-in-out backwards;
}
.anim[data-effect=float] > .letter > .letter-inner {
    animation: float-perpetual ease-in-out 10s 18s infinite alternate;
}
@keyframes float {
    0% {
        transform: translateY(60vh);
    }
    33% {
        transform: translateY(-8vh);
    }
    51% {
        transform: translateY(6vh);
    }
    66% {
        transform: translateY(-4vh);
    }
    80% {
        transform: translateY(3vh);
    }
    91% {
        transform: translateY(-1.3vh);
    }
    100% {
        transform: none;
    }
}
@keyframes float-perpetual {
    0% {
        transform: translateY(0);
    }
    37% {
        transform: translateY(-1.5vh);
    }
    58% {
        transform: translateY(1.3vh);
    }
    81% {
        transform: translateY(-1vh);
    }
    100% {
        transform: translateY(0.8vh);
    }
}
.anim[data-effect=bubble] > .letter {
    position: relative;
    animation: bubble-letter 1.3s cubic-bezier(0, 0, 0.33, 1) both;
}
.anim[data-effect=bubble] > .letter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid;
    border-radius: 999px;
    animation: bubble 2.6s cubic-bezier(0, 0.41, 0.28, 1) both;
    animation-delay: inherit;
}
.anim[data-effect=bubble] > .letter::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: currentColor;
    border-radius: 999px;
    animation: bubble 2.6s cubic-bezier(0, 0.41, 0.28, 1) both;
    animation-delay: inherit;
    opacity: 0.3;
}
@keyframes bubble-letter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes bubble {
    from {
        width: 0;
        height: 0;
    }
    to {
        width: 10em;
        height: 10em;
        opacity: 0;
        visibility: hidden;
    }
}
.btn,
.control {
    padding: .5em 1em;
    font-size: 1.2em;
}
.btn {
    background: #f20dcc;
    border: 1px solid transparent;
    color: white;
    cursor: pointer;
    transition: .25s;
}
.btn:hover,
.btn:focus {
    background: #f655db;
}
select {
    border: none;
    outline-color: #f20dcc;
}
#controls {
    position: absolute;
    right: 1px;
    top: 1px;
    border-bottom-left-radius: 5px;
    box-shadow: -1px 2px 13px rgba(51, 0, 43, 0.4);
}
#controls button {
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    border-bottom-left-radius: 5px;
}
.hide {
    display: none !important;
}
.alert {
    position: absolute;
    bottom: -1.6em;
    left: 50%;
    transform: translateX(-50%);
    padding: .4em 1em 2em;
    background: #f20dcc;
    color: #fff0fc;
    animation: 2s 40s peep-in both ease-in-out;
    border-radius: 5px;
    box-shadow: 0 -1px 6px 1px rgba(242, 13, 204, 0.3);
}
.alert.close {
    animation: peep-out .8s linear both;
}
@keyframes peep-in {
    0% {
        transform: translate(-50%, 100%);
        animation-timing-function: linear;
    }
    76% {
        transform: translate(-50%, -18%);
    }
    90% {
        transform: translate(-50%, -20%);
    }
    98% {
        transform: translate(-50%, 8%);
    }
    100% {
        transform: translate(-50%, 0);
    }
}
@keyframes peep-out {
    to {
        transform: translate(-50%, 100%);
        visibility: hidden;
    }
}
.dismiss {
    border: none;
    background: #ff70e7;
    color: white;
    padding: .2em .5em;
    cursor: pointer;
    margin-left: .2em;
}
.tip {
    position: absolute;
    color: #f20dcc;
    animation: show-tip .5s 15s ease-in both;
    font-size: 1.3rem;
    font-family: "Gloria Hallelujah", cursive;
}
@keyframes show-tip {
    from {
        visibility: hidden;
        opacity: 0;
    }
}
.tip .text {
    text-shadow: -1px 2px 4px rgba(51, 0, 43, 0.2);
}
.tip strong {
    font-weight: normal;
}
.tip svg {
    width: 110px;
    height: auto;
    -webkit-filter: drop-shadow(-1px 3px 5px rgba(51, 0, 43, 0.3));
    filter: drop-shadow(-1px 3px 5px rgba(51, 0, 43, 0.3));
    animation: show-tip .5s 15.1s ease-in both;
}
.tip svg path {
    fill: #f20dcc;
}
@keyframes show-tip-arrow {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: scale(0);
    }
    85% {
        visibility: visible;
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: none;
    }
}
.tip-effect {
    left: -120px;
    top: .5em;
    animation-delay: 20s;
}
.tip-effect .text {
    width: 110px;
    display: flex;
    justify-content: center;
    white-space: nowrap;
    margin-left: -40px;
}
.tip-effect svg {
    animation-delay: 20.1s;
}
.tip-type {
    display: flex;
    left: 50%;
    top: calc(50% - 6rem);
    transform: translateX(-50%);
    animation-delay: 12s;
}
.tip-type svg {
    animation-delay: 12.1s;
    width: 40px;
    height: 40px;
    margin-top: .8em;
    margin-left: 20px;
    transform: rotate(-9deg);
    -webkit-filter: drop-shadow(0px 1px 3px rgba(51, 0, 43, 0.3));
    filter: drop-shadow(0px 1px 3px rgba(51, 0, 43, 0.3));
}

HTML

<div class="anim-wrap">
    <div class="anim-text" contenteditable spellcheck="false">在这里输入一些文本</div>
</div>

<div id="controls">
    <select name="selectEffect" id="selectEffect" class="control">
        <option value="fade">Fade in</option>
        <option value="slide">Slide in</option>
        <option value="roll">Roll in</option>
        <option value="hop">Hop in</option>
        <option value="converge">Converge</option>
        <option value="spiral">Spiral</option>
        <option value="snow">Snow</option>
        <option value="meteorite">Meteorite</option>
        <option value="bounce">Bounce</option>
        <option value="peel">Peel</option>
        <option value="swivel">Swivel</option>
        <option value="float">Float</option>
        <option value="bubble">Bubble</option>
    </select>
    <div>
        <button class="btn animate">Animate</button>
    </div>

<div class="tip tip-effect">
        <svg width="100px" height="100px" viewBox="0 0 100 100">
            <path d="M87.7,10.2c0,0-0.5,0-1.6,0c-1,0-2.5,0-4.4,0.1c-0.9,0-2,0.1-3.1,0.2c-1.1,0-2.3,0.2-3.6,0.3c-1.3,0.1-2.7,0.4-4.1,0.6
				c-0.7,0.1-1.5,0.2-2.2,0.4c-0.7,0.2-1.5,0.3-2.3,0.5c-3.1,0.6-6.5,1.7-9.9,2.9c-3.4,1.3-7,2.8-10.5,4.8c-3.5,2-6.9,4.4-10.1,7.1
				c-3.2,2.8-6,6-8.6,9.4l-1.9,2.6l-1.8,2.6c-0.6,0.9-1.1,1.8-1.7,2.7c-0.6,0.9-1.1,1.8-1.7,2.7c-2.2,3.6-4.1,7.3-5.9,10.8
				C12.5,61.4,11,65,9.7,68.4c-0.6,1.7-1.3,3.4-1.8,5.1c-0.5,1.7-1,3.3-1.5,4.8c-0.9,3.1-1.6,6-2.2,8.6c-0.3,1.3-0.5,2.5-0.8,3.6
				c-0.2,1.1-0.4,2.1-0.6,3.1c-0.4,1.9-0.5,3.3-0.7,4.3c-0.2,1-0.2,1.5-0.2,1.5l0,0c0,0.2-0.2,0.3-0.4,0.3c-0.2,0-0.3-0.2-0.3-0.4
				c0,0,0.1-0.5,0.2-1.5c0.1-1,0.3-2.5,0.6-4.4c0.1-0.9,0.3-2,0.5-3.1C2.8,89.2,3,88,3.2,86.7c0.5-2.6,1.1-5.5,1.8-8.7
				c0.8-3.2,1.7-6.6,2.8-10.2c1.2-3.6,2.4-7.3,4-11.1c1.6-3.8,3.5-7.6,5.7-11.3c2.3-3.7,4.9-7.3,7.8-10.5c2.9-3.3,6.1-6.3,9.4-9.1
				c3.3-2.8,6.8-5.3,10.2-7.4c3.5-2.1,7.1-3.9,10.7-5.2c0.9-0.3,1.8-0.6,2.7-0.9c0.9-0.3,1.7-0.6,2.6-0.8c1.7-0.4,3.4-0.9,5-1.1
				c0.8-0.1,1.6-0.3,2.4-0.4c0.8-0.1,1.5-0.2,2.3-0.3c1.5-0.2,2.9-0.3,4.2-0.4c1.3,0,2.6-0.2,3.7-0.1c1.2,0,2.2,0,3.2,0
				c1.9,0,3.4,0.2,4.4,0.3c1,0.1,1.6,0.1,1.6,0.1c0.2,0,0.3,0.2,0.3,0.4C88,10.1,87.9,10.2,87.7,10.2z" />
            <path d="M79.9,20.8c0.5-0.7,1.1-1.4,1.7-2c0.6-0.6,1.2-1.3,1.9-1.9c0.7-0.6,1.3-1.1,2-1.7c0.4-0.3,0.7-0.5,1.1-0.8
				c0.4-0.2,0.7-0.5,1.1-0.7c1.5-0.9,3-1.7,4.6-2.5l2.3-1.1c0.8-0.3,1.5-0.8,2.3-1.2l0,1.7L94,9.4c-0.9-0.5-1.9-1-2.9-1.4
				c-2-0.8-4-1.5-6-2.1L79,4c-1-0.3-2-0.7-3.1-1.1c-1-0.4-2-0.9-2.9-1.5c-0.1-0.1-0.1-0.3-0.1-0.4C73,0.9,73.2,0.9,73.3,1l0,0
				c0.8,0.6,1.8,1,2.8,1.3c1,0.4,2,0.6,3.1,0.9l6.2,1.6c2.1,0.5,4.2,1.1,6.2,1.8c1,0.3,2.1,0.7,3.1,1.1c1,0.4,2,0.9,3,1.4l1.6,1
				l-1.7,0.7c-1.6,0.7-3.1,1.4-4.7,2.2c-1.5,0.7-3,1.5-4.5,2.3c-0.7,0.4-1.4,0.9-2.1,1.3c-0.7,0.4-1.4,0.9-2.1,1.4
				c-0.7,0.5-1.4,1-2,1.5c-0.3,0.3-0.7,0.5-1,0.8l-1,0.9c-0.1,0.1-0.4,0.1-0.5,0C79.8,21.1,79.8,20.9,79.9,20.8z" />
        </svg>
        <div class="text">
            <strong>查看更多效果</strong>
        </div>
    </div>
</div>

<div class="tip tip-type">
    <div class="text">
        <strong>输入一些文本试试：）</strong>
    </div>
    <svg width="100px" height="100px" viewBox="0 0 100 100">
        <path d="M90.3,85.8c0,0,0-0.5-0.1-1.5c-0.1-1-0.1-2.5-0.2-4.3c-0.1-0.9-0.2-1.9-0.2-3c-0.1-1.1-0.3-2.3-0.4-3.6
			c-0.1-0.6-0.1-1.3-0.3-2c-0.1-0.7-0.2-1.4-0.4-2.1c-0.1-0.7-0.2-1.4-0.4-2.2c-0.2-0.7-0.3-1.5-0.5-2.2c-0.7-3.1-1.7-6.3-2.9-9.7
			c-1.3-3.3-2.7-6.9-4.6-10.3c-1.9-3.4-4.3-6.8-7-9.8c-2.8-3.1-6.1-5.7-9.5-8.1c-3.4-2.4-7-4.5-10.6-6.6c-3.6-2.1-7.2-3.9-10.7-5.7
			c-3.5-1.8-7.1-3.3-10.4-4.7c-3.4-1.3-6.7-2.3-9.8-3.2c-3.1-0.9-5.9-1.6-8.5-2.2c-2.5-0.6-4.8-1-6.6-1.4C5.4,2.8,3.9,2.6,2.9,2.4
			C2,2.3,1.4,2.2,1.4,2.2l0,0C1.1,2.1,0.9,1.8,1,1.5C1,1.2,1.3,1,1.6,1.1c0,0,0.5,0.1,1.5,0.2c1,0.1,2.5,0.2,4.3,0.5
			c0.9,0.1,2,0.3,3.1,0.4c1.1,0.2,2.3,0.4,3.6,0.6c2.6,0.4,5.5,1,8.7,1.7C26,5.1,29.4,6,33,6.9C36.6,8,40.4,9,44.3,10.5
			C48.1,12,52,13.7,55.7,16c3.7,2.2,7.3,4.8,10.6,7.8c0.8,0.7,1.6,1.5,2.4,2.3c0.8,0.8,1.6,1.5,2.3,2.3c1.5,1.6,3,3.2,4.4,4.8
			c2.8,3.3,5.3,6.7,7.6,10.1c1.1,1.8,2.1,3.5,3,5.3c1,1.7,1.7,3.6,2.4,5.3c1.3,3.6,2.2,7,2.8,10.3c0.1,0.8,0.3,1.6,0.4,2.4
			c0.1,0.8,0.2,1.5,0.3,2.3c0.2,1.5,0.3,2.9,0.3,4.2c0.1,2.7,0,5-0.1,6.9c-0.1,1.9-0.3,3.4-0.4,4.4c-0.1,1-0.2,1.5-0.2,1.5
			c0,0.3-0.3,0.5-0.6,0.5C90.5,86.3,90.3,86.1,90.3,85.8z" />
        <path d="M78.5,77.4c0.8,0.5,1.5,1.1,2.2,1.7c0.4,0.3,0.7,0.6,1.1,1c0.3,0.3,0.7,0.7,1,1c0.6,0.7,1.3,1.4,1.8,2.2
			c0.6,0.8,1.1,1.5,1.6,2.4c1,1.6,1.8,3.3,2.6,5l1.2,2.5c0.2,0.4,0.4,0.8,0.6,1.2c0.2,0.4,0.5,0.8,0.7,1.2l-3,0
			c0.3-0.7,0.7-1.4,1.1-2.1c0.4-0.7,0.9-1.3,1.3-2l2.3-4.3c0.8-1.4,1.5-2.9,2.3-4.3c0.8-1.4,1.7-2.8,2.7-4.1
			c0.2-0.2,0.4-0.2,0.6-0.1c0.2,0.1,0.2,0.4,0.1,0.6l0,0c-0.9,1.3-1.6,2.7-2.2,4.2c-0.6,1.5-1.2,2.9-1.8,4.4l-1.7,4.5
			c-0.3,0.7-0.5,1.6-0.7,2.3c-0.2,0.8-0.6,1.5-1,2.2l-1.8,3l-1.2-3c-0.4-0.9-0.7-1.7-1.1-2.6c-0.4-0.8-0.8-1.7-1.2-2.5l-1.2-2.4
			c-0.4-0.8-0.8-1.6-1.3-2.4c-0.8-1.6-1.7-3.1-2.7-4.6c-0.2-0.4-0.5-0.8-0.7-1.1c-0.3-0.4-0.5-0.7-0.8-1.1c-0.3-0.3-0.5-0.7-0.8-1.1
			c-0.3-0.4-0.6-0.7-0.9-1.1c-0.2-0.3-0.1-0.6,0.1-0.8C78.1,77.2,78.3,77.2,78.5,77.4z" />
    </svg>
</div>

<div class="alert alert-come-back">
    <strong>Come back again for new effects!</strong>
    <button class="dismiss">OK</button>
</div>

animated letters + text editor：包括淡入淡出、滚动、飘雪、转环、漂浮、弹跳、陨石、气泡等。

h5, css3, 文本动画

编辑器支持Emmet

快捷键

animated letters + text editor：包括淡入淡出、滚动、飘雪、转环、漂浮、弹跳、陨石、气泡等。

h5, css3, 文本动画

HTML5 CSS3一个很棒的苹果产品响应式自适应变形动画

HTML5 CSS3一组很棒的带晃动动画特效的单选按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：