文字难以表达真正的效果，先直接上图看看最终呈现的效果：
这张由文字组合而成的神奇图片，它的原图是这样：
图片变形成文字，
这样的效果是如何实现的呢？
其实很简单，由html、CSS、js三部分组成，一看便会。
直接上代码：
1、Html部分：<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="style.css">
<script src="change.js"></script>
</head>
<body>
<input type="button" value="变成文字" onclick="change()">
<p id="text">In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.</p>
</body>
</html>
在Html中主要创建了用于显示图片的文字区域，大块的字符是用于稍后变形为图片使用。
2、CSS部分：p {
background: url("pic.avif");
width: 800px;
margin: auto;
background-position: center;
font-family: 'Poppins', sans-serif;
background-size: 70vh;
line-height: 14px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
body {
background: black;
overflow: hidden;
}
在CSS中定义了网页背景颜色，以及图片来源、位置等。如果要修改显示的图片，可以在这里修改：
3、JS代码部分：
这是最重要的部分，但也是最简单的部分，仅仅一行代码，就可实现图片变成文字显示：
function change(){
document.getElementById("text").style["-webkit-background-clip"] = "text";
}
可以看出，其实原理是使用了一个神奇的css属性：-webkit-background-clip。
如果不想让这个小秘密被人发现，可以对上面这段JS代码用JShaman加密处理：
加密后的代码成为：
这个神奇的小功能，快收藏起来吧。
最新评论