跳动的文字：CSS3动画、倒影、变量

蒲公英1001

已于 2022-06-27 20:12:24 修改

阅读量770

点赞数 1

于 2022-06-27 19:43:53 首次发布

本文链接：https://blog.csdn.net/wangyining070205/article/details/125489993

版权

这篇博客展示了如何使用CSS3的animation属性和-webkit-box-reflect实现文字动态跳跃及倒影效果。作者通过一个实例代码，解释了如何创建文字的波浪式动画，并发现倒影颜色由文字本身颜色决定。文章强调了CSS3的灵活性和强大功能，并提到了变量在简化CSS代码中的应用。

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

今天看到一个案例，实现文字的动态跳跃，是用CSS3写的，其中用到了animation属性，还学习了一个新属性box-reflect，不过写的时候，在谷歌浏览器中需要用-webkit-box-reflect，可以实现文字的倒影效果，不由得感慨css的功能越来越强大了。
效果如下：
在这里插入图片描述
使用变量的用法我平常用的不多，用变量代替可以使css代码更简洁，值得学习。
我做了一下测试，发现倒影的颜色是由span标记里的颜色决定的，倒影-webkit-box-reflect里设置的颜色不起什么作用。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>动画、倒影、变量</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				height: 100vh;
				display: flex; /*弹性布局，子元素可以水平垂直都居中*/
				justify-content: center;
				align-items: center;
				background-color: #23C6D9;
			}
			.wave {
				position: relative;
				-webkit-box-reflect: below -12px linear-gradient(transparent, red);
			}
			.wave span {
				position: relative;
				display: inline-block;
				color: #fff;
				font-size: 50px;
				text-transform: uppercase;
				letter-spacing: 8px;
				animation: wavy 1s ease-in-out infinite;
				/* 通过var函数调用自定义属性--i，在计算出动画延迟时间 */
				animation-delay: calc(0.1s * var(--i));
			}
			/* 定义动画 */
			@keyframes wavy {
				0% {
					transform: translateY(0);
				}
				20% {
					transform: translateY(-30px);
				}
				50%,100% {
					transform: translateY(0);
				}
			}
		</style>
	</head>

	<body>
		<div class="wave">
			<span style="--i:1;">w</span>
			<span style="--i:2;">a</span>
			<span style="--i:3;">i</span>
			<span style="--i:4;">t</span>
			<span style="--i:5;">i</span>
			<span style="--i:6;">n</span>
			<span style="--i:7;">g</span>
			<span style="--i:8;">.</span>
			<span style="--i:9;">.</span>
			<span style="--i:10;">.</span>
		</div>
	</body>
</html>

蒲公英1001

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
跳动的文字：CSS3动画、倒影、变量

今天看到一个案例，实现文字的动态跳跃，是用CSS3写的，其中用到了animation属性，还学习了一个新属性box-reflect，不过写的时候，在谷歌浏览器中需要用-webkit-box-reflect，可以实现文字的倒影效果，不由得感慨css的功能越来越强大了。效果如下：使用变量的用法我平常用的不多，用变量代替可以使css代码更简洁，值得学习。我做了一下测试，发现倒影的颜色是由span标记里的颜色决定的，倒影-webkit-box-reflect里设置的颜色不起什么作用。......
复制链接

扫一扫