这篇文章主要给大家分享怎样实现css文本波浪形运动的内容,也就是让文本动态的做波浪形运动,小编觉得挺有意思的,因此分享给大家做个参考,下面我们一起来看看怎样实现吧。
下面我们直接看完整的代码示例: 效果如下: 大家可以直接复制以上代码,在本地进行运行演示。 这里给大家介绍几个关键的属性: text-transform 属性控制文本的大小写。 animation 属性是一个简写属性: 通过 @keyframes 规则,能够创建动画。 关于css实现文本波浪形运动就介绍到这,有需要的朋友可以参考上述代码,希望本文对大家学习CSS实现动态效果有帮助,想要了解更多请关注群英网络其它相关文章。<!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>
animation-name:规定需要绑定到选择器的 keyframe 名称。。
animation-duration:规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay:规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。
语法:@keyframes animationname {keyframes-selector {css-styles;}}
参数animationname必需:定义动画的名称。
参数keyframes-selector必需:动画时长的百分比。
合法的值:
0-100%
from(与 0% 相同)
to(与 100% 相同)
参数css-styles必需:一个或多个合法的 CSS 样式属性。
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595