10个实用的HTML5卡片堆叠悬停移动动画特效

Stack Motion Hover Effects

html5, stack, hover

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<section class="content">
        <h2 class="content__title">_001</h2>
        <div class="grid grid--effect-vega">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content">
        <h2 class="content__title">_002</h2>
        <div class="grid grid--effect-castor">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content">
        <h2 class="content__title">_003</h2>
        <div class="grid grid--effect-hamal">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content">
        <h2 class="content__title">_004</h2>
        <div class="grid grid--effect-polaris">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content">
        <h2 class="content__title">_005</h2>
        <div class="grid grid--effect-alphard">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content">
        <h2 class="content__title">_006</h2>
        <div class="grid grid--effect-altair">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content">
        <h2 class="content__title">_007</h2>
        <div class="grid grid--effect-rigel">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content">
        <h2 class="content__title">_008</h2>
        <div class="grid grid--effect-canopus">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content">
        <h2 class="content__title">_009</h2>
        <div class="grid grid--effect-pollux">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="content content--padded">
        <h2 class="content__title">_010</h2>
        <div class="grid grid--effect-deneb">
            <a href="#" class="grid__item grid__item--c1">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/1.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">anaerobic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c2">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/2.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">exothermic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
            <a href="#" class="grid__item grid__item--c3">
                <div class="stack">
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__deco"></div>
                    <div class="stack__figure">
                        <img class="stack__img" src="https://tympanus.net/Development/StackMotionHoverEffects/img/3.png" alt="Image" />
                    </div>
                </div>
                <div class="grid__item-caption">
                    <h3 class="grid__item-title">diatomic</h3>
                    <div class="column column--left">
                        <span class="column__text">Period</span>
                        <span class="column__text">Subjects</span>
                        <span class="column__text">Result</span>
                    </div>
                    <div class="column column--right">
                        <span class="column__text">2045</span>
                        <span class="column__text">133456</span>
                        <span class="column__text">Positive</span>
                    </div>
                </div>
            </a>
        </div>
    </section>

</main>
<script src="https://tympanus.net/Development/StackMotionHoverEffects/js/anime.min.js"></script>
<script src="https://tympanus.net/Development/StackMotionHoverEffects/js/main.js"></script>

Stack Motion Hover Effects

html5, stack, hover

编辑器支持Emmet

快捷键

Stack Motion Hover Effects

html5, stack, hover

使用Anime.js实现的18个HTML5文本动画特效

HTML5悬停时文本3D翻转剥落并伴有碎片飞出的动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：