现代教育网站开发项目的研究,建设网站为网站网站做广告,国外扁平化网站,怎样用代码建设一个网站MENU 版本一(requestAnimationFrame)版本二(setTimeout)版本三(css) 版本一(requestAnimationFrame)
前言 window.requestAnimationFrame()告诉浏览器——你希望执行一个动画#xff0c;并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数… MENU 版本一(requestAnimationFrame)版本二(setTimeout)版本三(css) 版本一(requestAnimationFrame)
前言 window.requestAnimationFrame()告诉浏览器——你希望执行一个动画并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数该回调函数会在浏览器下一次重绘之前执行。 备注若你想在浏览器下次重绘之前继续更新下一帧动画那么回调函数自身必须再次调用requestAnimationFrame()。requestAnimationFrame()是一次性的。 当你准备更新在屏动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次但在大多数遵循W3C建议的浏览器中回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命在大多数浏览器里当requestAnimationFrame()运行在后台标签页或者隐藏的iframe里时requestAnimationFrame()会被暂停调用以提升性能和电池寿命。 DOMHighResTimeStamp参数会传入回调方法中它指示当前被requestAnimationFrame()排序的回调函数被触发的时间。在同一个帧中的多个回调函数它们每一个都会接受到一个相同的时间戳即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数单位为毫秒最小精度为1ms(1000μs)。 警告请确保总是使用第一个参数(或其他一些获取当前时间的方法)来计算动画在一帧中的进度否则动画在高刷新率的屏幕中会运行得更快。请参考下面示例的做法。 requestAnimationFrame(callback); html
div ididBoxRAF不要去强留任何一段关系 即使你很在意 惜我者 我惜之 嫌我者 我弃之 时间识人 落难之心 不经一事 不懂于人 水不试不知深浅 人不交不知好坏 时间是个好东西 验证了人心 见证了人性 不要总担心身边会失去谁 记得问问自己谁又害怕失去你
/divJavaScript
function initRAF() {let textEl document.querySelector(#idBoxRAF),str textEl.textContent,i 0;textEl.textContent ;function initR() {if (i str.length) return false;textEl.textContent str[i];requestAnimationFrame(initR);i;}initR();
}initRAF();版本二(setTimeout)
div ididBoxp三百六十行行行干破防。/pp吃得苦中苦老板开路虎。/pp不听老人言开心好几年。/pp明知山有虎猛敲退堂鼓。/pp行而上学不行退学。/pp安得广夏千万间广厦一千万一间。/pp阎王叫我三更死二更我就抹脖子。/pp一寸光阴一寸金三寸光阴一个鑫。/pp风雪压我两三年两眼一闭就长眠。/pp轻舟已过万重山乌蒙山连着山外山。/pp失败是成功之母可惜成功六亲不认。/p
/divJavaScript
function init(timeout 28) {let textEl document.querySelector(#idBox),pEl textEl.querySelectorAll(p),timeStrat 0;textEl.textContent ;pEl.forEach((pT, j) {let str pT.textContent,newP document.createElement(p);textEl.appendChild(newP);for (let i 0; i str.length; i) {setTimeout(() newP.textContent str[i], timeStrat);timeStrat timeout;}});
}init(30);版本三(css)
html
div classcontainerp你只是来体验生命 什么都拥有不了 什么都留不住 不需要证明什么 更没有什么事一定要实现 你能做的就是不断尝试 收获 感受 然后放下 我们来到这世间 只是为了看花怎么开 水怎么流 太阳如何升起 夕阳何时落下经历有趣的事情 遇见难忘的人 生活原本就很沉闷 但跑起来就有风了/pp classeraserspan classtext你只是来体验生命 什么都拥有不了 什么都留不住 不需要证明什么 更没有什么事一定要实现 你能做的就是不断尝试 收获 感受 然后放下 我们来到这世间 只是为了看花怎么开 水怎么流 太阳如何升起 夕阳何时落下经历有趣的事情 遇见难忘的人 生活原本就很沉闷 但跑起来就有风了/span/p
/divstyle
* {margin: 0;padding: 0;box-sizing: border-box;
}body {background: #000;color: #fff;
}.container {width: 80%;margin: 1em auto;line-height: 2;text-indent: 2em;position: relative;
}.eraser {position: absolute;inset: 0;
}.text {background: linear-gradient(to right, #0000 var(--p), #000 calc(var(--p) 30px));color: transparent;animation: erase 10s linear forwards;
}property --p {syntax: percentage;initial-value: 0%;inherits: false;
}keyframes erase {to {--p: 100%;}
}
