如何使用jQuery构建卡片悬停时标题文本和图标动画 - 浮动和弹跳

描述文本和标题浮动，图标呈现弹跳入场动画。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

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

<head>
    <title>Animated Text and Icon Menu with jQuery</title>
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/AnimatedTextIconMenu/css/style.css" />
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/AnimatedTextIconMenu/css/stimenu.css" />
    <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
    <link href='https://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css' />
</head>

<body>
    <div class="container">
        <h1>Animated Text and Icon Menu<span> with jQuery</span></h1>
        <ul id="sti-menu" class="sti-menu">
            <li data-hovercolor="#37c5e9">
                <a href="#">
                    <h2 data-type="mText" class="sti-item">Advanced Patient Care</h2>
                    <h3 data-type="sText" class="sti-item">Personalized to your needs</h3>
                    <span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
                </a>
            </li>
            <li data-hovercolor="#ff395e">
                <a href="#">
                    <h2 data-type="mText" class="sti-item">Alternative Medicine</h2>
                    <h3 data-type="sText" class="sti-item">Holistic approaches</h3>
                    <span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
                </a>
            </li>
            <li data-hovercolor="#57e676">
                <a href="#">
                    <h2 data-type="mText" class="sti-item">Modern Info Center</h2>
                    <h3 data-type="sText" class="sti-item">Educating you</h3>
                    <span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
                </a>
            </li>
            <li data-hovercolor="#d869b2">
                <a href="#">
                    <h2 data-type="mText" class="sti-item">Future Family Planning</h2>
                    <h3 data-type="sText" class="sti-item">For a healthier future</h3>
                    <span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
                </a>
            </li>
            <li data-hovercolor="#ffdd3f">
                <a href="#">
                    <h2 data-type="mText" class="sti-item">Advanced Technology</h2>
                    <h3 data-type="sText" class="sti-item">From the latest research</h3>
                    <span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span>
                </a>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/libs/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.iconmenu.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#sti-menu').iconmenu({
                animMouseenter: {
                    'mText': {
                        speed: 500,
                        easing: 'easeOutExpo',
                        delay: 200,
                        dir: -1
                    },
                    'sText': {
                        speed: 500,
                        easing: 'easeOutExpo',
                        delay: 200,
                        dir: -1
                    },
                    'icon': {
                        speed: 700,
                        easing: 'easeOutBounce',
                        delay: 0,
                        dir: 1
                    }
                },
                animMouseleave: {
                    'mText': {
                        speed: 400,
                        easing: 'easeInExpo',
                        delay: 0,
                        dir: -1
                    },
                    'sText': {
                        speed: 400,
                        easing: 'easeInExpo',
                        delay: 0,
                        dir: 1
                    },
                    'icon': {
                        speed: 400,
                        easing: 'easeInExpo',
                        delay: 0,
                        dir: -1
                    }
                }
            });
        });
    </script>
</body>

</html>

描述文本和标题浮动，图标呈现弹跳入场动画。

模板，教程

编辑器支持Emmet

快捷键

描述文本和标题浮动，图标呈现弹跳入场动画。

模板，教程

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

使用CSS3和jQuery创建的文章排版效果 - 3D折纸标题

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：