用clip-path实现一个水波纹的字体

最新推荐文章于 2024-03-26 10:43:47 发布

苏苏哇哈哈

最新推荐文章于 2024-03-26 10:43:47 发布

阅读量450

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_48085286/article/details/120755149

版权

css 专栏收录该内容

63 篇文章 6 订阅

订阅专栏

1.实现效果

在这里插入图片描述

2.实现步骤

2.1.写一个h2标签

<h2 content="苏苏">苏苏</h2>

2.3.设置字体镂空

body {
	margin: 0;
	padding: 0;
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center;
	background-color: #222;
	min-width: 1200px;
}

h2 {
	color: #fff;
	font-size: 8em;
	color: transparent;
	-webkit-text-stroke: 2px #00ffff;
	position: relative;
}

如下图效果：
在这里插入图片描述

2.3text-stroke属性

使用text-stroke文字的描边属性，color: transparent，实现字体镂空的效果。

text-stroke是： text-stroke-width和text-stroke-color两个属性的简写写法。

text-stroke-width ：设置或检索对象中的文字的描边厚度
text-stroke-color ：设置或检索对象中的文字的描边颜色

2.4 h2添加一个相同文字的伪元素

h2::before {
	content: attr(content);
	position: absolute;
	top: 0;
	left: 0;
	color: #00ffff;
	animation: a 4s ease-in-out infinite;
}

content设置伪元素的内容，结合attr属性获取元素属性内容。

为其设置一个动画效果

@keyframes a {

	0%,
	100% {
		-webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
		clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);

	}

	50% {
		-webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
		clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
	}
}

2.5clip-path

clip-path创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
clip-path的属性值可以是以下几种：
在这里插入图片描述

这里用到的就是多变形，推荐一个clip-path在线网站，快速帮助我们绘画出想要的形状。
clip-path在线生成网站
在这里插入图片描述

3.完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			margin: 0;
			padding: 0;
			display: flex;
			height: 100vh;
			justify-content: center;
			align-items: center;
			background-color: #222;
			min-width: 1200px;
		}

		h2 {
			color: #fff;
			font-size: 8em;
			color: transparent;
			-webkit-text-stroke: 2px #00ffff;
			position: relative;
		}

		 h2::before {
			content: attr(content);
			position: absolute;
			top: 0;
			left: 0;
			color: #00ffff;
			animation: a 4s ease-in-out infinite;
		}

		@keyframes a {

			0%,
			100% {
				-webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
				clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);

			}

			50% {
				-webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
				clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
			}
		}
	</style>
	<body>
		<h2 content="苏苏">苏苏</h2>
	</body>
</html>

4.在线预览

苏苏的codepen

苏苏哇哈哈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用clip-path实现一个水波纹的字体

1.实现效果2.实现步骤2.1.写一个h2标签<h2 content="苏苏">苏苏</h2>2.3.设置字体镂空body { margin: 0; padding: 0; display: flex; height: 100vh; justify-content: center; align-items: center; background-color: #222; min-width: 1200px;}h2 { color: #fff;
复制链接

扫一扫