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

最新推荐文章于 2024-01-28 21:04:57 发布

weixin_39676979

最新推荐文章于 2024-01-28 21:04:57 发布

阅读量184

点赞数

文章标签： css动画效果 css动画效果代码案例 html生日动画代码

在今天的文章里，我们采用HTML和CSS来实现一个波浪形的动画文本。它是最简单的CSS动画效果之一。对于初学者来讲，这是学习CSS伪元素概念的最佳示例之一。实现方法，通过结合使用一些CSS属性来执行获取波浪文本的基本思想。主要的“主体”部分是通过使用标记内的标记创建的。CSS代码用于创建HTML结构的“主体”部分的波浪形文本。 HTML代码如下：

<div class="wavy">         <span style="--i:1">Wspan>         <span style="--i:2">Espan>         <span style="--i:3">Bspan>         <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>

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

 <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">Wspan>         <span style="--i:2">Espan>         <span style="--i:3">Bspan>         <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>

通过运行此代码，我们看到最终效果：

本文完~

weixin_39676979

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画效果_【开发小技巧】029—用CSS如何制作一个波浪形文本动画效果

在今天的文章里，我们采用HTML和CSS来实现一个波浪形的动画文本。它是最简单的CSS动画效果之一。对于初学者来讲，这是学习CSS伪元素概念的最佳示例之一。实现方法，通过结合使用一些CSS属性来执行获取波浪文本的基本思想。主要的“主体”部分是通过使用标记内的标记创建的。CSS代码用于创建HTML结构的“主体”部分的波浪形文本。HTML代码如下：<div class="wavy"&g...
复制链接

扫一扫

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

“相关推荐”对你有帮助么？