什么行业做网站合适,沈阳男科正规医院,银行网站源码,高县住房和城乡建设部网站1. css的动画#xff08;animation)
css中实现动画有两种方式#xff1a;transition过渡动画、 animation自定义动画。
具体的可以看MDN链接#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
使用keyframes自定义关键帧动画并未其命名使用自定义动… 1. css的动画animation)
css中实现动画有两种方式transition过渡动画、 animation自定义动画。
具体的可以看MDN链接https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
使用keyframes自定义关键帧动画并未其命名使用自定义动画的时候需要对animation属性进行配
属性含义animation-name 指定一个或多个keyframes自定义的动画名字当多个的时候用隔开。 例如anination-name:test1,test2 animation-duration指完成一个动画的所需要的时间animation-timing-function 指动画效果在每个周期内是如何进行的 例如linear匀速运动 ease-in: 由慢到快 ease-out: 由快到慢 ease-in-out由慢到快在到慢 steps(n, jumpterm) 将动画分为n分然后按照n个定格显示动画效果 animation-delay 设置动画延迟时间s/ms)默认为0当为负数的时候代表立即执行 *****适合当多个动画的时候可依次定义每个动画的延迟执行时间 区分开每个动画。 animation-iteration-count 动画执行次数默认执行一次infinite无限执行 可以指定多个动画效果用隔开 animation-direction 动画的运动方向 例如reverse反方向播放 alternate正反交替播放循环 animation-fill-mode 设置动画在执行前后的样式 例如forwards 目标元素保持最后一帧动画 backwards 目标元素保持起始帧动画 animation-play-state设置动画是暂停还是开始
2 . 使用animation 动画实现一个简单的打字效果 js/css 代码如下 const contentDiv document.querySelector(#content)const data 最简单的打字机效果实现.split()let index 0function writing() {if (index data.length) {contentDiv.innerHTML data[index]setTimeout(writing, 100)// requestAnimationFrame(writing)}}writing() #content {height: 400px;padding: 10px;font-size: 28px;background-color: #eee;border-radius: 20px;}#content::after {color: #f00;animation: blink 1s infinite;content: |;}keyframes blink {from {opacity: 0;}to {opacity: 1;}}
效果如图 3. 接入SSE,使用后台推送的数据来动态实现打字效果
选SSE,主要是是我们不需要向后台推送数据只需要实时接收就可以SSE返回的是流式输出的数据
我们可以使用node 自己写一个sse 接口如 因为我们使用的模块的格式写的接口所以需要在app.js里引入一定要设置允许跨域不然会出现跨域的情况 在需要的页面中使用new EventSource来接入就可以了
具体关于SSE的可以看MDN的链接https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource 可以看到控制台是以流式来推数据的 把后台返回的数据进行拼接展示 scriptconst contentDiv document.querySelector(#content)let currentContent // 存储当前显示的内容function writing(text) {let index 0function appendText() {if (index text.length) {currentContent text[index]contentDiv.innerHTML currentContentindexsetTimeout(appendText, 100) // 调整这个时间来改变打字速度}}appendText()}const sse new EventSource(http://localhost:3000/user/sse)sse.addEventListener(message, (event) {const data JSON.parse(event.data)writing(data.msg)})/script
效果截图如下 4. 扩展--ch单位
ch是一个相对于数字0的大小
例如1ch 相当于1/2 汉字也就是2ch 相当于一个汉字的宽度
2ch时如图 1ch时如图 1ch 相当于1个英文宽度
