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 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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
香妃
2021/03/03 冲泡冲煮
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python自带的IDE在哪里
2020/07/01 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
实习自我鉴定范文
2013/10/30 职场文书
小学毕业寄语大全
2014/04/03 职场文书
运动会标语
2014/06/21 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS