沉默的博客 - HTML5
type: channel
link: https://cmsblog.cn/tag/HTML5/
items: HTML5实现微信聊天气泡效果
items: HTML+CSS+JS实现打字机效果！

HTML5实现微信聊天气泡效果
type: item
date: 2023-05-21T21:05:00+08:00
description: HTML5实现微信聊天气泡效果图： 话不多说直接放代码： 漫川邀请“汤圆”进入群聊 汤圆 哇！博主的站点真的好好看，请问如何给博主进行留言呢？ 漫川 您可以在下面与博主进行留言，看到会回复您的喔！ 漫川 您的每句话都会记录在漫川站点的数据库里，直到风消失的那天. CSS代码：/*微信聊天气泡*/ .chat-sender{ clear:both; font-size: 80%; } .chat-sender div:nth-of-type(1){ float: left; } .chat-sender div:nth-of-type(2){ margin: 0 50px 2px 50px; padding: 0px; color: #848484; font-size: 70%; text-align: left; } .chat-sender div:nth-of-type(3){ background-color: #efefef; /*float: left;*/ margin: 0 50px 10px 50px; padding: 10px 10px 10px 10px; border-radius:7px; text-indent: -12px; } .chat-receiver{ clear:both; font-size: 80%; } .chat-receiver div:nth-of-type(1){ float: right; } .chat-receiver div:nth-of-type(2){ margin: 0px 50px 2px 50px; padding: 0px; color: #848484; font-size: 70%; text-align: right; } .chat-receiver div:nth-of-type(3){ /*float:right;*/ background-color: #b2e281; margin: 0px 50px 10px 50px; padding: 10px 10px 10px 10px; border-radius:7px; } .chat-receiver div:first-child img, .chat-sender div:first-child img{ width: 40px; height: 40px; border-radius: 10%; } .chat-left_triangle{ height: 0px; width: 0px; border-width: 6px; border-style: solid; border-color: transparent white transparent transparent; position: relative; left: -22px; top: 3px; } .chat-right_triangle{ height: 0px; width: 0px; border-width: 6px; border-style: solid; border-color: transparent transparent transparent #b2e281; position: relative; right:-22px; top:3px; } .chat-notice{ clear: both; font-size: 70%; color: white; text-align: center; margin-top: 15px; margin-bottom: 15px; } .chat-notice span{ background-color: #cecece; line-height: 25px; border-radius: 5px; padding: 5px 10px; }

HTML+CSS+JS实现打字机效果！
type: item
date: 2022-11-13T09:38:00+08:00
description: 直接上代码：HTML泰科智能 CSS.daziji{ height: 120px; line-height: 120px; text-align: center; position: relative; font-size: 50px; letter-spacing: .2em; } .daziji h2{ margin: 50px 0 20px; color: #fff;display: initial; } .container{ margin-right: 5px; } .delete{ border-right: 2px solid #fff; /*step-end是动画过渡效果，设置step-end代表不过渡*/ animation: blingbling 1s step-end infinite; } @keyframes blingbling{ from,to{ border-color: transparent; } 50%{ border-color: #fff; } }JavaScriptconst data = ["协手未来！","开启自动化新时代","构建更智能的世界","轻巧智动 协作无间"]; //打字机文字 英文","分隔 const container = document.getElementsByClassName('container')[0]; const Delete = document.getElementsByClassName('delete')[0]; //data数组的下标 let index = 0; //data数组每一项字符串的下标 let strIndex = 0; //开始的时间或是上一刻的时间 let start = null; //上次操作与现在的时间间隔 let interval = 0; //每次变化的间隔 let change = 500; //现在是否是删除状态 let isDelete = false; //根据requestAnimationFrame定义，这是一个回调函数，这个函数会 //传入一个参数，用来表示执行回调函数的时刻 function blink(time){ //这个方法必须在函数内部再调用一次才会无限循环调用 window.requestAnimationFrame(blink); //如果不存在开始的时间，说明是第一次进入函数 if(!start){ start = time; } //计算现在与上次操作差了多久 interval = time - start; //如果大于间隔时间，则应该执行新的操作 if(interval > change){ //取出数组的某一个字符串 let str = data[index]; //不在删除状态 if(!isDelete){ //change是时间间隔，使用随机数，模仿不同的打字时间 change = 500 - Math.random()*400; container.innerHTML = str.slice(0,++strIndex); } else{ container.innerHTML = str.slice(0,strIndex--); } //当前进行了操作，需要保存当前的时间 start = time; //对字符串进行判断，全部打印后则删除 if(strIndex == str.length){ isDelete = true; change = 200; start = time + 1200; } //删除后打印下一个 if(strIndex