INFO

基础的展示效果

图片文字

文字与图片交融

<template>
	<div class="container">
		<p class="text">文字与图片交融</p>
	</div>
</template>

<style lang="scss" scoped>
.container {
	position: relative;
	width: inherit;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	.text {
		margin: 0;
		cursor: pointer;
		font-size: 40px;
		font-weight: bold;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url("https://file.wangzevw.com/images/default_top_img.webp");
		color: transparent;
		background-size: cover;
		/* 背景以文字的形式裁剪 */
		-webkit-background-clip: text;
		background-clip: text;
	}
}
</style>

文字交融

文字交融效果

文字交融

类似水滴融合效果

<template>
	<div class="container">
		<p class="text">文字交融效果</p>
	</div>
</template>

<style lang="scss" scoped>
.container {
	position: relative;
	width: inherit;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: contrast(30);
	.text {
		cursor: pointer;
		font-size: 40px;
		font-weight: bold;
		letter-spacing: -30px;
		animation: ani 2s linear forwards;
	}
}

@keyframes ani {
	0% {
		filter: blur(10px);
	}
	100% {
		letter-spacing: 10px;
		filter: blur(0px);
	}
}
</style>

文字颗粒

颗粒, 文字 ！

<template>
	<div class="container">颗粒, 文字 ！</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	font-weight: bold;
	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		background-image: radial-gradient(transparent 1px, #fff 1px);
		background-size: 3px 3px;
		backdrop-filter: blur(1px);
	}
}
</style>

纵向颗粒

颗粒, 文字 ！

<template>
	<div class="container">颗粒, 文字 ！</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	font-weight: bold;
	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		background-image: linear-gradient(to right, #fff 1px, transparent 0);
		background-size: 4px 4px;
		backdrop-filter: blur(1px);
	}
}
</style>