销售网站建设常遇到的问题,小蝌蚪幸福宝入口导航,做代理稳妥的彩票网站有哪些,seo查询工具源码#x1f482;作者简介#xff1a; THUNDER王#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读#xff0c;同时任汉硕云#xff08;广东#xff09;科技有限公司ABAP开发顾问。在学习工作中#xff0c;我通常使用偏后… 作者简介 THUNDER王一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读同时任汉硕云广东科技有限公司ABAP开发顾问。在学习工作中我通常使用偏后端的开发语言ABAPSQL进行任务的完成对SAP企业管理系统SAP ABAP开发和数据库具有较深入的研究。 文章概要 各位小伙伴们大家好呀今天又是久违的系列专刊更新——《优秀前端案例分享》今天给大家带来的优质案例是网页实现打字机效果让我们一起来看看吧 每日一言 梦想总还是要有的万一实现了呢 目录前言打字机效果预览实现方式 CSS实现 JS组件库 Typed.js Typed.js安装 Typed.js的使用 Typed.js参数 TypeLighter TypeLighter演示案例代码 TypeLighter演示效果预览 TypeLighter参数 Easy-typer-js写在最后的话前言 各位小伙伴们大家好呀今天又是久违的系列专刊更新——《优秀前端案例分享》今天给大家带来的优质案例是网页实现打字机效果让我们一起来看看吧 打字机效果预览 下面为大家展示的是网页实现打字机效果的预览图 实现方式 笔者认为实现网页打字机效果有两种方式来实现是比较好的。第一种方法是纯原生CSS手撸第二种方法是使用JS组件库来实现。 CSS实现 使用纯CSS实现打字机效果主要用到了keyframes 和伪元素 :after在下方给了一个CSS实现网页打字机效果的示例代码小伙伴们可以学习一下。 keyframes的语法规则如下 keyframes animationname {keyframes-selector {css-styles;}}使用keyframes规则你可以创建动画。 创建动画是通过逐步改变从一个CSS样式设定到另一个。 在动画过程中您可以更改CSS样式的设定多次。 指定的变化时发生时使用%或关键字“from”和“to”这是和0%到100%相同。 0%是开头动画100%是当动画完成。 下面给出一段利用纯CSS实现的打字机效果代码大家可以复制粘贴查看实现效果
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleTyping/titlelink relstylesheet hrefstyle.cssstyle* {margin: 0;padding: 0;font-family: monospace, sans-serif;font-weight: bold;
}
.flex {display: flex;justify-content: center;align-items: center;
}
.container {height: 100vh;background-color: #fff;;
}.content {animation: content-slide-in 2s steps(13) forwards;overflow: hidden;white-space: nowrap;position: relative;
}.content::after {content: ;position: absolute;right: 0;height: 16px;animation: sprinkle-bling .5s steps(2) infinite;
}keyframes content-slide-in {from {width: 0;}to {width: 13ch;}
}keyframes sprinkle-bling {from {border-right: 1px solid transparent;}to {border-right: 1px solid #000;}
}/style
/head
bodydiv classcontainer flexdiv classcontentHello, World!/div/div
/body
/html JS组件库 JS组件库可以快速的实现网页打字机效果并且可以多元定制化打字效果强烈推荐使用JS组件库方法下面给大家介绍几个轻量级的JS打字机组件库: Typed.js Typed.js是一个类型库输入任意字符串它将以打字方式显示出来。您可以设置打字速度退格等参数。 Typed.js安装 一CDN引入
script srchttps://cdn.jsdelivr.net/npm/typed.js2.0.12/script二npm安装
npm install typed.jsTyped.js的使用 一设置参数 scriptvar typed new Typed(.typed, {strings: [SAP ABAPer, FICO Consultant^1000], //输入内容, 支持html标签typeSpeed: 100, //打字速度backSpeed: 50, //回退速度loop: true,}); /script二使用span标签引用上面设置的id
span idtyped stylewhite-space: pre-wrap;line-height: 30px;/spanTyped.js参数 更多参数设置请参考原作者github仓库——Typed.js TypeLighter TypeLighter.js是实现打字机效果的一个类型库输入任意字符串它将以打字方式显示出来。您可以设置多种参数进行个性化配置。 TypeLighter演示案例代码 下面给出一段利用TypeLighter库实现的打字机效果代码大家可以复制粘贴查看实现效果
script src https://cdn.jsdelivr.net/npm/typelighterjs/typelighter.min.js/scriptstylep{/*父级*/position:ablative;/*子级*/position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
/style
pDeeply span classtypeWriter data-max1.5 data-text[satisfying.,customizable.]/span/pTypeLighter演示效果预览 TypeLighter参数
属性默认值使用data-textNull保持字符串的数组一个接一个地写入。data-speed1写入速度与此整数成比例。data-start500 (ms)写下一个字符串之前的延迟。data-end2000 (ms)删除当前字符串之前的延迟。data-randomTrue启用后TypeWriter会在写入或删除下一个字符之前等待一段随机时间。data-maxInfinityTypeWriter停止之前的最大完整迭代次数。data-dltSpeedTrue启用后删除给定字符串的速度是写入字符串的两倍。data-checkVisibleFalse启用后当元素出现在视口中时动画将立即开始。Easy-typer-js easy-typer-js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.而且对MVVM框架支持完美还兼容原生JS. 关于对easy-typer-js库的详细介绍可以看这篇博主文章[JS插件]功能十分强大的打字机效果: easy-typer-js在此不过多赘述。 写在最后的话 本文花费大量时间介绍了多种方式实现网页打字机效果希望能帮助到各位小伙伴码文不易还望各位大佬们多多支持哦你们的支持是我最大的动力 ✨原创不易还希望各位大佬支持一下\textcolor{blue}{原创不易还希望各位大佬支持一下}原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力\textcolor{9c81c1}{点赞你的认可是我创作的动力}点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向\textcolor{ed7976}{收藏你的青睐是我努力的方向}收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富\textcolor{98c091}{评论你的意见是我进步的财富}评论你的意见是我进步的财富
