CSS 3.0文字悬停跳动特效代码


Posted in HTML / CSS onOctober 26, 2020

给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 

CSS 3.0文字悬停跳动特效代码

 以下是代码实现,欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 3.0文字悬停跳动特效</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #000;
            }
 
            .loader {
                position: relative;
            }
 
            .loader span {
                position: relative;
                font-size: 2em;
                color: #fff;
                display: inline-block;
                text-transform: uppercase;
                animation: animate 2s ease-in-out infinite;
                animation-delay: calc(0.1s * var(--i));
                animation-play-state: paused;
            }
 
            .loader:hover span {
                animation-play-state: running;
            }
            @keyframes animate {
 
                0%,
                40%,
                100% {
                    transform: translateY(0);
                }
 
                20% {
                    transform: translateY(-50px);
                }
            }
        </style>
    </head>
 
    <body>
        <div class="loader">
            <span style="--i:1;">A</span>
            <span style="--i:2;">n</span>
            <span style="--i:3;">i</span>
            <span style="--i:4;">m</span>
            <span style="--i:5;">a</span>
            <span style="--i:6;">t</span>
            <span style="--i:7;">i</span>
            <span style="--i:8;">o</span>
            <span style="--i:9;">n</span>
            <span style="--i:10;">_</span>
            <span style="--i:11;">P</span>
            <span style="--i:12;">l</span>
            <span style="--i:13;">a</span>
            <span style="--i:14;">y</span>
            <span style="--i:15;">_</span>
            <span style="--i:16;">S</span>
            <span style="--i:17;">t</span>
            <span style="--i:18;">a</span>
            <span style="--i:19;">t</span>
            <span style="--i:20;">e</span>
            <span style="--i:21;">.</span>
        </div>
    </body>
 
</html>

总结

到此这篇关于CSS 3.0文字悬停跳动特效代码的文章就介绍到这了,更多相关CSS 3.0文字悬停跳动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 #HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 #HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 #HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 #HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 #HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 #HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 #HTML / CSS
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
python海龟绘图实例教程
2014/07/24 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Django开发中复选框用法示例
2018/03/20 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
2014年幼儿园元旦活动方案
2014/02/13 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
挂靠协议书范本
2014/04/22 职场文书
期末学生评语大全
2014/04/24 职场文书
档案信息化建设方案
2014/05/16 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
生死抉择观后感
2015/06/09 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书