html+css制作文字跳动效果

悠闲的咸鱼小白

于 2024-08-23 14:38:37 发布

阅读量1.2k

点赞数 15

文章标签： css html5

本文链接：https://blog.csdn.net/2301_76942182/article/details/141463515

版权

这段代码展示了一个带有动画效果的网页，其中的文字会有跳动、颜色变化和缩放效果，同时背景有炫丽的渐变动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳动文字效果</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(45deg, #ff6ec4, #7873f5, #00c6ff, #ff00ab);
            background-size: 400% 400%;
            animation: gradientBG 10s ease infinite;
        }

        .jumping-text {
            display: inline-block;
            font-size: 24px;
            animation: jump 1s infinite, colorChange 2s infinite, scaleChange 1s infinite;
        }

        @keyframes jump {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes colorChange {
            0% {
                color: #ff0000; /* 红色 */
            }
            25% {
                color: #00ff00; /* 绿色 */
            }
            50% {
                color: #0000ff; /* 蓝色 */
            }
            75% {
                color: #ff00ff; /* 品红色 */
            }
            100% {
                color: #ff0000; /* 红色 */
            }
        }

        @keyframes scaleChange {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.5); /* 放大到原来的1.5倍 */
            }
        }

        @keyframes gradientBG {
            0% {
                background-position: 0% 0%;
            }
            50% {
                background-position: 100% 100%;
            }
            100% {
                background-position: 0% 0%;
            }
        }
    </style>
</head>
<body>
    <div class="jumping-text">欢迎光临</div>
</body>
</html>

CSS 样式

代码介绍：
1.body 样式

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(45deg, #ff6ec4, #7873f5, #00c6ff, #ff00ab);
background-size: 400% 400%;
animation: gradientBG 10s ease infinite;
}

display: flex;: 使用 Flexbox 布局，使内容居中对齐。
justify-content: center; 和 align-items: center;: 垂直和水平居中对齐内容。
height: 100vh;: 使 body 的高度为视口高度的 100%。
margin: 0;: 去除默认的外边距。
background: linear-gradient(45deg, #ff6ec4, #7873f5, #00c6ff, #ff00ab);: 设置背景为一个45度角的线性渐变色。
background-size: 400% 400%;: 将背景大小扩大到四倍，以便于动画效果的展示。
animation: gradientBG 10s ease infinite;: 应用背景渐变动画，使背景颜色在10秒内循环渐变。

2..jumping-text 样式

.jumping-text {
display: inline-block;
font-size: 24px;
animation: jump 1s infinite, colorChange 2s infinite, scaleChange 1s infinite;
}

display: inline-block;: 使文本作为内联块元素，可以应用动画效果。
font-size: 24px;: 设置文本的字体大小。
animation: jump 1s infinite, colorChange 2s infinite, scaleChange 1s infinite;: 同时应用三个动画效果：
jump：跳动效果。
colorChange：颜色变化效果。
scaleChange：缩放效果。

动画定义

跳动效果

@keyframes jump {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

0%, 100%：动画的开始和结束状态，文本位置在原位。
50%：动画的中间状态，文本向上移动 20 像素，产生跳动效果。

颜色变化效果

@keyframes colorChange {
0% {
color: #ff0000; /* 红色 */
}
25% {
color: #00ff00; /* 绿色 */
}
50% {
color: #0000ff; /* 蓝色 */
}
75% {
color: #ff00ff; /* 品红色 */
}
100% {
color: #ff0000; /* 红色 */
}
}