在上一篇《很实用！css实现在单击按钮时显示按下的动态效果》中大家介绍了怎么使用css实现在单击按钮时显示按下的动态效果，有需要的朋友可以去学习了解一下~
本文将带大家用HTML/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); } } P H P 中 文 网 开 班 啦 ~ 快 学 起 来 ~ ~ ~
效果如下：
立即学习“前端免费学习笔记（深入）”；
大家可以直接复制以上代码，在本地进行运行演示。
这里给大家介绍几个关键的属性：
text-transform 属性控制文本的大小写。
animation 属性是一个简写属性：
animation-name：规定需要绑定到选择器的 keyframe 名称。。 animation-duration：规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function：规定动画的速度曲线。 animation-delay：规定在动画开始之前的延迟。 animation-iteration-count：规定动画应该播放的次数。 animation-direction：规定是否应该轮流反向播放动画。
通过 @keyframes 规则，能够创建动画。
语法：@keyframes animationname {keyframes-selector {css-styles;}}参数animationname必需：定义动画的名称。参数keyframes-selector必需：动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）参数css-styles必需：一个或多个合法的 CSS 样式属性。
PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！
以上就是用HTML/CSS制作有趣的动态波浪形文本行的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1550465.html
微信扫一扫 
支付宝扫一扫 
