0
点赞
收藏
分享

微信扫一扫

【开发小技巧】029—用CSS如何制作一个波浪形文本动画效果

【开发小技巧】029—用CSS如何制作一个波浪形文本动画效果_html

在今天的文章里,我们采用HTML和CSS来实现一个波浪形的动画文本。它是最简单的CSS动画效果之一。对于初学者来讲,这是学习CSS伪元素概念的最佳示例之一。

实现方法,通过结合使用一些CSS属性来执行获取波浪文本的基本思想。主要的“主体”部分是通过使用<body>标记内的<span>标记创建的。CSS代码用于创建HTML结构的“主体”部分的波浪形文本。

HTML代码如下:

<div class="wavy"> 
<span style="--i:1">W</span>
<span style="--i:2">E</span>
<span style="--i:3">B</span>
<span style="--i:4">前</span>
<span style="--i:5">端</span>
<span style="--i:6">开 </span>
<span style="--i:7">发</span>
<span style="--i:8">公</span>
<span style="--i:9">众</span>
<span style="--i:10">号</span>


</div>

我们通过HTML代码里的HTML标签,先设计一个用于演示的波浪效果的文本。

接着再通过CSS代码,为HTML标签里的文本添加动画效果,CSS代码如下:

<style type="text/css"> 
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1ab1cc;
}

.wavy {
position: relative;
}

.wavy span {
position: relative;
display: inline-block;
color: #fff;
font-size: 2em;
text-transform: uppercase;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
0% {
transform: translateY(0px);
}

40% {
transform: translateY(-40px);
}


80% transform: translateY(-80px);
}



100% {
transform: translateY(0px);
}
}
</style>

最后,将两部分代码进行结合,我们得到了以下完整的代码:

<!DOCTYPE html> 
<html>


<head>
<meta charset="utf-8">
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1ab1cc;
}


.wavy {
position: relative;
}


.wavy span {
position: relative;
display: inline-block;
color: #fff;
font-size: 2em;
text-transform: uppercase;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}


@keyframes animate {
0% {
transform: translateY(0px);
}


40% {
transform: translateY(-40px);
}


80% transform: translateY(-80px);
}




100% {
transform: translateY(0px);
}
}
</style>
</head>


<body>
<div class="wavy">
<span style="--i:1">W</span>
<span style="--i:2">E</span>
<span style="--i:3">B</span>
<span style="--i:4">前</span>
<span style="--i:5">端</span>
<span style="--i:6">开 </span>
<span style="--i:7">发</span>
<span style="--i:8">公</span>
<span style="--i:9">众</span>
<span style="--i:10">号</span>


</div>
</body>


</html>

通过运行此代码,我们看到最终效果:

本文完~


【开发小技巧】029—用CSS如何制作一个波浪形文本动画效果_html_03

【开发小技巧】029—用CSS如何制作一个波浪形文本动画效果_css_04

举报

相关推荐

0 条评论