纯css 制作文字波浪动画特效

最新推荐文章于 2024-09-10 09:26:27 发布

氪精大佬

最新推荐文章于 2024-09-10 09:26:27 发布

阅读量1.3k

点赞数 1

分类专栏：前端 css 个人学习文章标签： css html

本文链接：https://blog.csdn.net/weixin_44000275/article/details/109013637

版权

本文展示了如何仅使用CSS创建文字波浪动画特效，包括效果图展示和具体代码实现。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

代码

html

<h1 class="load">
<span>A</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span>е</span>
<span>м</span>
</h1>

css

<style>
body{
	background: #393939;
}
h1.load{
  text-align: center;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  font-size: 4.6875em;
  color: transparent;
  letter-spacing: 0.01em;
}
.load span{
  text-shadow:
    0 0 2px rgba(204, 208, 212,0.9),
    0 15px 25px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),
    0 -5px 10px rgba(255, 255, 255, 0.5),
    0 5px 10px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(255, 255, 25