html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>极客风打字效果</title><link rel="stylesheet" href="./main.css"><!-- 字体 --><link href='http://cdn.repository.webfont.com/webfonts/nomal/136694/46969/5e74aca8f629d80b10c0088a.css' rel='stylesheet' type='text/css' />
</head><body><div id="container"><h1><span id='text' data-text='["你好我是孙祥飞","我是前端工程师","我热爱前端开发"]'></span><span class="mark"></span></h1></div><script src="./main.js"></script>
</body></html>

CSS

* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'huxiaobo-gdh1f9cebba81215f6', 'Microsoft Yahei';
}#container {display: flex;background: #2f3542;align-items: center;justify-content: center;height: 100vh;
}h1 {color: white;font-size: 5em;font-weight: 300;
}.mark {border-right: 2px solid white;animation: mk .7s step-end infinite;margin-left: 4px;
}@keyframes mk {from,to {border-color: transparent;}50% {border-color: white;}
}@-o-keyframes mk {from,to {border-color: transparent;}50% {border-color: white;}
}

js

let text = document.querySelector("#text")
let textValue = JSON.parse(text.getAttribute("data-text"))// 起始文本索引
let index = 0// 字符索引
let fontIndex = 0// 初始时间
let start = 0// 速度
let speed = 500// 判断一段文字是否显示完毕
let flag = falsefunction type(time) {// time 是 requestAnimationFrame 自动传的参，为函数自从开始到当前的毫秒数/* 给start一个新的time的意义在于不让动画执行的太突兀，因为timeFlag是当前的毫秒减去上一次的毫秒，在大于speed的情况下我们才执行if里面的语句，不加的话也没什么关系,只是函数一加载好就执行动画,显得有些突兀罢了*/if (!start) start = time + 500let textI = textValue[index]let timeFlag = time - startif (timeFlag > speed) {let textI = textValue[index]if (!flag) {text.innerText = textI.slice(0, ++fontIndex)speed = 500 - (Math.round(Math.random() * 400))} else {text.innerText = textI.slice(0, fontIndex--);}start = time// 如果当一段文本显示完毕,就倒叙‘删除’显示的文本if (fontIndex == textI.length) {speed = 200// 给动画一个停留的时间start = start + 1200// flag变为真,运行 text.innerText = textI.slice(0, fontIndex--);flag = true}// 如果当前显示的文本 '删除完毕' 就变更当前段落if (fontIndex < 0) {flag = falsestart = time + 200index = ++index % textValue.length}}window.requestAnimationFrame(type);
}
window.requestAnimationFrame(type)

为前端的小伙伴推荐一下峰华的‘https://space.bilibili.com/302954484?spm_id_from=333.788.b_765f7570696e666f.1的b站链接，讲的非常棒如果有兴趣可以康康。哈哈哈

前端详细教学超酷JS实现极客风打字效果相关推荐

html5js图片滚动,基于滚动的超酷js图片动画特效
这是一款基于滚动的超酷js图片动画特效.该特效在使用鼠标滚动屏幕时,根据屏幕的当前位置,屏幕上的图片做出相应的动画效果,非常炫酷. 使用方法 HTML结构 CSS样式 // The container ...
超酷的javascript文字云/标签云效果 - D3 Cloud
日期:2012-10-11 来源:GBin1.com 在线演示如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于 ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
华为鸿蒙是物联网操作系统；字节跳动的飞聊被 App Store 下架；FFmpeg 作者编写 JS 引擎 | 极客头条...
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
必应API接口node.js版 - 极客玩家大白
文章目录必应API接口-单条提交必应API接口-批量提交批量提交 - 版本1 批量提交 - 改进1 批量提交 - 改进2 Bing还提供了其他API接口近期,在研究百度.必应.API等的url ...
极客风---尝试用代码做一份演示文稿吧
一场极客的盛宴什么是"用代码做演示文稿" 用代码写演示文稿,优势何在? 引子敏捷快速简单易上手代码写演示文稿,适用于什么样的情景学术报告创新场合目前较为成熟的代码演示 ...
[存]超酷JS拖拽翻页效果
DEMO: http://www.lanrentuku.com/js/other-670.html 代码 <html> <head> <title>blog< ...
前端性能优化-服务端和网络优化-极客时间
前端性能优化目录前端性能优化第六章:服务端和网络优化 6.1 CDN--如何合理配置CDN缓存 6.2 DNS--主流的DNS优化方法有哪些? 6.3 HTTP:如何减少 HTTP 请求 6.4 ...
12种超酷HTML5 SVG和CSS3浮动标签效果
这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

前端详细教学超酷JS实现极客风打字效果

html

CSS

js

前端详细教学超酷JS实现极客风打字效果相关推荐

最新文章

热门文章

前端详细教学 超酷JS实现极客风打字效果

html

CSS

js

前端详细教学 超酷JS实现极客风打字效果相关推荐

最新文章

热门文章

前端详细教学超酷JS实现极客风打字效果

前端详细教学超酷JS实现极客风打字效果相关推荐