<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>炫酷的打字效果</title>
<style>
html, body, #wrapper {
font-family: 'Roboto Mono', sans-serif;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
#wrapper::-webkit-scrollbar {
width: 4px;
}
#wrapper::-webkit-scrollbar-thumb {
background-color: white;
}
#wrapper {
background: linear-gradient(to right, #03a9f4, #1565c0);
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
#wrapper #paper {
background-color: white;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 45px, rgba(0, 0, 0, 0.22) 0px 10px 18px;
height: 700px;
left: 50%;
margin: 50px 0px;
overflow: hidden;
position: absolute;
top: 0px;
transform: translateX(-50%);
width: 500px;
}
#wrapper #paper.typing {
animation: rumble 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
#wrapper #paper #cursor {
animation: blink 1.2s linear infinite;
background-color: #03a9f4;
height: 20px;
left: 90px;
position: absolute;
top: 80px;
width: 2px;
}
#wrapper #paper .dot {
background-color: #03a9f4;
border-radius: 1000px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px inset, rgba(0, 0, 0, 0.23) 0px 3px 10px inset;
height: 25px;
left: 25px;
position: absolute;
width: 25px;
z-index: 2;
}
#wrapper #paper .dot#dot1 {
top: 70px;
}
#wrapper #paper .dot#dot2 {
top: 340px;
}
#wrapper #paper .dot#dot3 {
top: 600px;
}
#wrapper #paper #vertical-margin {
background-color: rgba(211, 47, 47, 0.5);
height: 100%;
left: 80px;
position: absolute;
top: 0px;
width: 2px;
}
#wrapper #paper #horizontal-margins .horizontal-margin {
background-color: rgba(3, 169, 244, 0.5);
color: transparent;
font-size: 0px;
height: 2px;
left: 0px;
position: absolute;
top: 80px;
width: 100%;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(0) {
top: 60px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(1) {
top: 80px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(2) {
top: 100px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(3) {
top: 120px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(4) {
top: 140px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(5) {
top: 160px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(6) {
top: 180px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(7) {
top: 200px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(8) {
top: 220px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(9) {
top: 240px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(10) {
top: 260px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(11) {
top: 280px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(12) {
top: 300px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(13) {
top: 320px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(14) {
top: 340px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(15) {
top: 360px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(16) {
top: 380px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(17) {
top: 400px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(18) {
top: 420px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(19) {
top: 440px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(20) {
top: 460px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(21) {
top: 480px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(22) {
top: 500px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(23) {
top: 520px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(24) {
top: 540px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(25) {
top: 560px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(26) {
top: 580px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(27) {
top: 600px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(28) {
top: 620px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(29) {
top: 640px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(30) {
top: 660px;
}
#wrapper #paper #horizontal-margins .horizontal-margin:nth-child(31) {
top: 680px;
}
#wrapper #paper #letters {
backface-visibility: hidden;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
.letter {
display: inline-block;
font-weight: 300;
height: 20px;
margin-left: 2px;
position: absolute;
text-align: center;
transition: all 0.5s, color 0.1s;
width: 10px;
}
.letter.off-screen {
font-weight: 700;
transform: scale3d(10, 10, 10) rotate(1080deg);
}
@keyframes blink {
0%, 49% {
opacity: 1;
}
50%, 99% {
opacity: 0;
}
}
@keyframes rumble {
10%, 90% {
transform: translateX(-50%) translate3d(-3px, 0, 0);
}
20%, 80% {
transform: translateX(-50%) translate3d(4px, 0, 0);
}
30%, 50%, 70% {
transform: translateX(-50%) translate3d(-2px, 0, 0);
}
40%, 60% {
transform: translateX(-50%) translate3d(4px, 0, 0);
}
}
</style>
</head>
<body>
<script src="js/moment.min.js"></script>
<div id="wrapper">
<div id="paper">
<div id="cursor"></div>
<div class="dot" id="dot1"></div>
<div class="dot" id="dot2"></div>
<div class="dot" id="dot3"></div>
<div id="vertical-margin"></div>
<div id="horizontal-margins">
<div class="horizontal-margin">0</div>
<div class="horizontal-margin">1</div>
<div class="horizontal-margin">2</div>
<div class="horizontal-margin">3</div>
<div class="horizontal-margin">4</div>
<div class="horizontal-margin">5</div>
<div class="horizontal-margin">6</div>
<div class="horizontal-margin">7</div>
<div class="horizontal-margin">8</div>
<div class="horizontal-margin">9</div>
<div class="horizontal-margin">10</div>
<div class="horizontal-margin">11</div>
<div class="horizontal-margin">12</div>
<div class="horizontal-margin">13</div>
<div class="horizontal-margin">14</div>
<div class="horizontal-margin">15</div>
<div class="horizontal-margin">16</div>
<div class="horizontal-margin">17</div>
<div class="horizontal-margin">18</div>
<div class="horizontal-margin">19</div>
<div class="horizontal-margin">20</div>
<div class="horizontal-margin">21</div>
<div class="horizontal-margin">22</div>
<div class="horizontal-margin">23</div>
<div class="horizontal-margin">24</div>
<div class="horizontal-margin">25</div>
<div class="horizontal-margin">26</div>
<div class="horizontal-margin">27</div>
<div class="horizontal-margin">28</div>
<div class="horizontal-margin">29</div>
<div class="horizontal-margin">30</div>
</div>
<div id="letters"></div>
</div>
</div>
<script>
const getEl = el => document.getElementById(el)
const setStyle = (el, prop, val) => el.style[prop] = val
const setAttr = (el, attr, val) => el.setAttribute(attr, val)
const addClass = (el, className) => el.classList.add(className)
const removeClass = (el, className) => el.classList.remove(className)
const resetStyles = el => el.removeAttribute('style')
const removeAllChildren = el => {
while (el.hasChildNodes()) el.removeChild(el.lastChild)
}
const WRAPPER = getEl('wrapper'),
html5实现酷炫的文字打字动画特效源码.zip
版权申诉
143 浏览量
2022-11-04
23:43:54
上传
评论
收藏 21KB ZIP 举报
html5实现酷炫的文字打字动画特效源码.zip （2个子文件） 
132692147975150165 
index.html 14KB js 
moment.min.js 50KB资源评论
毕业_设计
- 粉丝: 1944
- 资源: 1万+
最新资源
- Java项目-电影院售票管理系统(java+Servlet+JSP+JDBC+Mysql)
- SSM整合开发-图书管理系统
- 计二202301020210蒋怡.zip
- 基于74LS160的70进制计数器仿真节线图
- 基于74LS160的30进制与70进制转化仿真节线图
- 【用360解压工具解压】springboot+vue实验室(预约)管理系统【www.java1234.com】.zip
- commodity.cpp
- WordPress主题JustNews v6.01自适应自媒体博客主题免授权
- C语言开发小游戏案例 - 弹跳球
- Delphi 12 控件之TMS VCL UI Pack v13.1.3.2.7z
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
