图片文字制作视差效果

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

html

  <section><p><!-- 请自行添加文章 --></p><div id='bg'></div></section>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
* {margin: 0; /* 外边距 */padding: 0; /* 内边距 */font-family: 'Poppins', sans-serif; /* 字体样式 */
}
section {background-color: #000; /* 背景颜色 */height: 100vh; /* 高度 */overflow: hidden; /* 超出隐藏 */
}section p {position: fixed; /* 定位：相对于浏览器 */top: 0;left: 0;font-size: 24px; /* 字体大小 */letter-spacing: -1px; /* 字符间距 */line-height: 0.8em; /* 行高 */background: url(../img/bg.jpg);-webkit-background-clip: text; /* 背景裁剪：文字 */text-align: justify; /* 两端对齐 */color: transparent; /* 透明文字 */filter: contrast(2); /* 对比度 */user-select: none; /* 无法选中 */
}#bg {position: absolute;top: 0;right: 0;width: 100%;height: 100%;background: url(../img/bg.jpg);background-attachment: fixed; /* 背景不滚动 */
}

JS

     var bg = document.getElementById('bg');window.onmousemove = function(e) {// 修改宽度，根据鼠标bg.style.width = e.clientX + 'px';}

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

图片文字制作视差效果相关推荐

图片文字介绍滑动效果代码介绍
代码链接结果展示代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
android img 制作工具,图片文字制作软件下载
文字图片制作软件app是一款强大的手机图文制作工具,内置丰富的背景主题,界面精美,操作轻松,支持表情插入,可以让你的图文更加精彩耐看,需要的朋友快来下载吧! 文字图片制作器app介绍本应用可以快速让 ...
css实现瀑瀑流-图片文字实现自适应效果
代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
python 百度ocr安装_Python利用百度文字识别(OCR)服务实现图片文字提取，准确率超高...
最近和朋友聊天,聊到一个充满使命感但又略显心酸的话题--下班回家在网上给小朋友抄题...那么问题来了,除了大家所知的QQ文字识别功能之外,还有哪些方式可以做到文字识别呢. 作为一名热心的Python小 ...
WPF中制作立体效果的文字或LOGO图形
WPF中制作立体效果的文字或LOGO图形原文:WPF中制作立体效果的文字或LOGO图形较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来 ...
android 图片墙拼贴,三步搞定用APP打造图片文字拼贴效果
相信大家一定见过一种文字拼贴效果的图片,许多大小不一.字体不同.颜色各异的文字拼合出一幅完整的画面.如果你曾经也想自己制作这么一张高端大气上档次的独特图片,却苦于自己的PS水平不到家,那么一定不要错过 ...
闪动的文字图片怎么制作？教你一招闪图在线制作
很多时候我们为了突出文本图片中的内容,就可以给文字图片添加特效,比如可以将静态文字图片制作成有闪动效果的gif动画.那么,我们应该如何制作呢?使用在线照片合成(https://www.gif.cn/) ...
开源免费图片文字识别 OCR 工具 tesseract v4.1.0 的 Docker 镜像制作与使用
开源免费图片文字识别 OCR 工具 tesseract v4.1.0 的 Docker 镜像制作与使用一背景在日常的一些工作中,偶尔也需要我们把图片转换为文字.目前大部分办公软件还无法实现类似的 ...
html圆形图片怎么加白边框,带图片，带文字，有白边框的这种图片怎么制作的？...
这种"留白图文"可以用手机APP快速制作,用现成的文字模板,或者是自己加字,加图案都OK.比如:下面同样一张图片和文字,加上留白后,只需调整照片位置就能做出多种图文效果. 1.横版 ...

图片文字制作视差效果

图片文字制作视差效果

效果图

代码区

html

CSS

JS

图片文字制作视差效果相关推荐

最新文章

热门文章