文字一行行出现的图片怎么弄(代码中文字和图片在一行)

文字一行行出现的图片怎么弄,原文标题:一行代码,实现神奇的文字图片。文字难以表达真正的效果,先直接上图看看最终呈现的效果

文字一行行出现的图片怎么弄,原文标题:一行代码,实现神奇的文字图片。

文字难以表达真正的效果,先直接上图看看最终呈现的效果:

文字一行行出现的图片怎么弄(代码中文字和图片在一行)

这张由文字组合而成的神奇图片,它的原图是这样:

文字一行行出现的图片怎么弄(代码中文字和图片在一行)

图片变形成文字,

这样的效果是如何实现的呢?

其实很简单,由htmlCSS、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加密处理:

文字一行行出现的图片怎么弄(代码中文字和图片在一行)

加密后的代码成为:

文字一行行出现的图片怎么弄(代码中文字和图片在一行)

这个神奇的小功能,快收藏起来吧。

本文《文字一行行出现的图片怎么弄(代码中文字和图片在一行)》由网赚联盟( wangzhuan.org.cn )整理或原创,感谢您的阅读。

随机文章

站长导航
友情链接交换
搜素引擎算法
关键词排名优化
GEO培训
SEO教程
站长导航
友情链接交换

百度搜索“网赚联盟”即可找到本站,微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟( wangzhuan.org.cn )欢迎用户投稿,发布者:修丹道的程序猿,文章版权归作者所有,投稿文章不代表网赚联盟立场,中二少年发布为网赚联盟原创文章,转载请注明出处:https://wangzhuan.org.cn/818496.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注