信封(使用者自己输入文字打字机输出)资源-CSDN文库

共3个文件

png：1个

js：1个

html：1个

158 浏览量 2024-02-15 21:57:08 上传评论收藏 38KB ZIP 举报

标题中的“信封(使用者自己输入文字打字机输出)”暗示了这是一个关于创建自定义信封，并且可能包含一个用户交互功能，让用户能够输入文字，以打字机的效果显示出来。这种效果常见于网页设计中，为用户提供一种复古或个性化的体验。这可能是一个网页应用或一个使用JavaScript库实现的互动元素。描述中的内容与标题一致，再次强调了用户可以自行输入文字，并通过打字机效果展示。这种效果通常通过JavaScript库如jQuery来实现，模拟打字机逐字打印文字的过程，增强用户体验。标签“信封”、“情人节”和“打字机效果”揭示了这个项目可能是为情人节特别设计的，可能包含浪漫元素。同时，“jQuery”标签表明这个项目使用了jQuery JavaScript库，它是一个广泛使用的库，简化了DOM操作、事件处理、动画效果等任务。在压缩包的文件名称列表中，我们有： 1. "情人节信封.html"：这是一个HTML文件，很可能是项目的主要页面，包含了页面结构和内容，以及可能内联或者通过外部引用引入的CSS和JavaScript。 2. "jquery-3.5.1.min.js"：这是jQuery库的一个版本，用于实现页面上的交互效果，包括可能的打字机效果。 3. "èצ.png"：文件名看起来像是乱码，但通常PNG文件用于存储图像。这可能是信封设计的一部分，或者是页面背景、装饰元素或其他视觉元素。结合这些信息，我们可以推断这是一个使用HTML和jQuery构建的网页项目，特别是针对情人节的主题。用户可以在网页上输入文字，然后这些文字会以打字机的效果动态显示出来，增强节日氛围。页面可能还包含其他视觉元素，如PNG图像，来提升整体的设计感。为了实现打字机效果，开发者可能利用了jQuery的动画功能，比如`.typeWrite()`插件或者自定义的计时函数，逐字显示用户输入的内容。

资源推荐

资源详情

资源评论

收起资源包目录

信封.zip （3个子文件）

情人节信封.html 5KB

èצ.png 7KB

jquery-3.5.1.min.js 87KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-3.5.1.min.js"></script> <title>情人节快乐</title> <style> * { margin: 0; padding: 0; outline: none; } .contain { display: flex; position: relative; height: 100vh; background: #fae1dd; /*弹性布局-默认子元素都会沿着x轴对齐*/ justify-content: center; align-items: center; /*让弹性布局垂直*/ flex-direction: column; } .valentine { position: relative; top: 50px; /*向上移动三秒匀速循环*/ animation: up 3s linear infinite; cursor: pointer; } /*关键帧上下移动*/ @keyframes up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25px); } } .envelope { position: relative; width: 450px; height: 300px; background-color: #f08080; } /*信封*/ .env { display: none; content: ""; position: absolute; top: 3px; width: 318px; height: 318px; background-color: #f08080; /*旋转45度*/ transform: rotate(-45deg); /*旋转原点*/ transform-origin: 0 0; border-top-right-radius: 30px; } .font { position: absolute; width: 0; height: 0; border-top: 143px solid transparent; border-bottom: 150px solid transparent; border-right: 270px solid #f4978e; top: 6px; left: 180px; } .font1 { position: absolute; display: block; width: 0; height: 0; border-top: 240px solid #f08080; border-right: 450px solid transparent; top: 8px; } /*创建一个直角三角形*/ .font::before { content: ""; position: absolute; width: 0; height: 0; /*应该是font这个三角形(top+bottom)143px+150px*/ border-top: 293px solid transparent; border-left: 450px solid #f8ad9d; top: -142px; left: -180px; } /*按钮*/ .button { position: absolute; width: 70px; height: 70px; background: url(./猫爪.png) no-repeat rgb(247, 247, 121); background-size: 100%; background-position: center; border-radius: 50%; top: 100px; left: 180px; } /*贺卡*/ .card { width: 410px; height: 255px; background-color: hwb(51 58% 4%); position: absolute; top: 8px; left: 20px; /* box-shadow: -5px -5px 100px rgba(0, 0, 0, .3)*/ } .txt { padding: 30px; font-size: 16px; color: #003049; } .shadow { position: absolute; width: 495px; height: 38px; background-color: rgba(0, 0, 0, .3); bottom: 60px; border-radius: 50%; /*投影加动画,匀速运动,无限循环*/ animation: shadow-size 3s linear infinite; } /*阴影在水平方向上缩放*/ @keyframes shadow-size { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.85); } } </style> </head> <body> <div class="contain"> <div class="valentine"> <div class="envelope"></div> <div class="env"></div>  <div class="card"> <div class="txt"></div> </div> <div class="font1"></div> <div class="font"></div> <div class="button"></div> </div> <div class="shadow"></div> </div> </body> <script> var btn = document.querySelector('.button'); var font1 = document.querySelector('.font1'); var card = document.querySelector('.card'); var a = prompt(); $(".button").click(() => { $(".font1").hide(); $(".env").show(); $(".card").stop().animate({ top: "-90px" }, "show") typewriter(); }) $(".button").mouseleave(() => { $(".font1").show(); $(".env").hide(); $(".card").css("background-color","#f08080") $(".card").stop().animate({ top: 0 }, "show") }) //打字机 function typewriter() { const el = $(".txt") const str = a; let progress = 0 const timer = setInterval(() => { const curr = str.substr(progress, 1) if (curr === "<") { progress = str.indexOf(">", progress) + 1; } else { progress++; } el.html(str.substring(0, progress) + (progress & 1 ? "_" : "")) //停止打字机 if (progress > str.length) { clearInterval(timer); } }, 250) } </script> </html>

评论收藏

内容反馈