所属分类：web前端开发
本文将带大家用HTML/CSS制作一种有趣的动态波浪形文本行效果！
下面我们直接看完整的代码示例：
微博登录
QQ登录1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 <!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: rgb(74, 152, 255); } .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); } 20% { transform: translateY(-20px); } 40%, 100% { transform: translateY(0px); } } </style></head> <body><div class="wavy"> <span style="--i:1">P</span> <span style="--i:2">H</span> <span style="--i:3">P</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> <span style="--i:11">快</span> <span style="--i:12">学</span> <span style="--i:13">起</span> <span style="--i:14">来</span> <span style="--i:15">~</span> <span style="--i:16">~</span> <span style="--i:17">~</span> </div></body></html>
登录后复制效果如下：
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
大家可以直接复制以上代码，在本地进行运行演示。
这里给大家介绍几个关键的属性：
text-transform 属性控制文本的大小写。
animation 属性是一个简写属性：
123456 animation-name：规定需要绑定到选择器的 keyframe 名称。。 animation-duration：规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function：规定动画的速度曲线。 animation-delay：规定在动画开始之前的延迟。 animation-iteration-count：规定动画应该播放的次数。 animation-direction：规定是否应该轮流反向播放动画。
登录后复制通过 @keyframes 规则，能够创建动画。
12345678 语法：@keyframes animationname {keyframes-selector {css-styles;}}参数animationname必需：定义动画的名称。参数keyframes-selector必需：动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）参数css-styles必需：一个或多个合法的 CSS 样式属性。
登录后复制PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！
以上就是用HTML/CSS制作有趣的动态波浪形文本行的详细内容，更多请关注zzsucai.com其它相关文章！
