Skip to content

Instantly share code, notes, and snippets.

@biezhi

biezhi/index.html

Created Aug 1, 2018
Embed
What would you like to do?
打字机效果源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS 打字机效果了解一下</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link rel="stylesheet" href="main.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src="https://cdn.bootcss.com/typed.js/2.0.7/typed.min.js"></script>
</head>
<body>
<div class="container">
<article class="message is-danger">
<div class="message-header">
<p>小葵花妈妈课堂开课了!</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
同学们,我们今天来学习
<code>typed.js</code> 这个小东西。 它的官网是:
<a href="https://github.com/mattboldt/typed.js">https://github.com/mattboldt/typed.js</a>
</div>
</article>
<section class="hero is-info example1">
<div class="hero-body">
<div class="container">
<div class="title">
<span class="tag is-danger is-large">
Example 1
</span>
</div>
<div class="typed-bg">
<span class="typeItem1"></span>
</div>
<div style="margin-top: 10px;">
<a class="button is-dark btn-start">点 🐔 开始</a>
<a class="button is-dark btn-stop">停一下</a>
<a class="button is-dark btn-reset">重置</a>
<a class="button is-dark btn-loop">循环</a>
</div>
</div>
</div>
</section>
<section class="hero is-success example2">
<div class="hero-body">
<div class="container">
<div class="title">
<span class="tag is-warning is-large">
Example 2
</span>
</div>
<div class="typed-bg">
<span class="typeItem2"></span>
</div>
<div style="margin-top: 10px;">
<a class="button is-dark btn-start">点 🐔 开始</a>
<a class="button is-dark btn-stop">停一下</a>
<a class="button is-dark btn-reset">重置</a>
<a class="button is-dark btn-loop">循环</a>
</div>
</div>
</div>
</section>
<section class="hero is-danger example3">
<div class="hero-body">
<div class="container">
<div class="title">
<span class="tag is-black is-large">
Example 3
</span>
</div>
<div class="typed-bg">
<span class="typeItem3"></span>
</div>
<div style="margin-top: 10px;">
<a class="button is-dark btn-start">点 🐔 开始</a>
<a class="button is-dark btn-stop">停一下</a>
<a class="button is-dark btn-reset">重置</a>
<a class="button is-dark btn-loop">循环</a>
</div>
</div>
</div>
</section>
<section class="hero is-warning example4">
<div class="hero-body">
<div class="container">
<div class="title">
<span class="tag is-info is-large">
Example 4
</span>
</div>
<div style="width: 95%;">
<input type="text" class="input typeItem4" />
</div>
<div style="margin-top: 10px;">
<a class="button is-primary btn-start">点 🐔 开始</a>
<a class="button is-dark btn-stop">停一下</a>
<a class="button is-light btn-reset">重置</a>
<a class="button is-danger btn-loop">循环</a>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
var typed1 = new Typed('.typeItem1', {
strings: ['<h2>今晚吃点什么呢?<h2>', '吃鸡!!!必须吃鸡!', '吃鸡是不可能吃鸡的,这辈子都不可能吃鸡!'],
typeSpeed: 150
});
typed1.stop();
var typed2 = new Typed('.typeItem2', {
strings: ['大兄弟,头伸过来', '我给你展示一个东西!'],
typeSpeed: 150,
startDelay: 1000,
loop: true,
loopCount: Infinity
});
typed2.stop();
var typed3 = new Typed('.typeItem3', {
strings: ['男魂符号,三次元代表男性,二次元代表兄贵哲♂学!比利王万岁!'],
typeSpeed: 150,
startDelay: 100,
cursorChar: '♂'
});
typed3.stop();
var typed4 = new Typed('.typeItem4', {
strings: ['我也可以在input中打印...飘飘~<h3>标签还是打印出来</h3>'],
typeSpeed: 150,
startDelay: 100,
loop: true,
loopCount: Infinity,
cursorChar: '♂'
});
typed4.stop();
addListeners(typed1, '.example1');
addListeners(typed2, '.example2');
addListeners(typed3, '.example3');
addListeners(typed4, '.example4');
function addListeners(typed, cls) {
document.querySelector(cls + ' .btn-start').addEventListener('click', function () {
typed.start();
});
document.querySelector(cls + ' .btn-stop').addEventListener('click', function () {
typed.stop();
});
document.querySelector(cls + ' .btn-reset').addEventListener('click', function () {
typed.reset();
});
document.querySelector(cls + ' .btn-loop').addEventListener('click', function () {
toggleLoop(typed1);
});
}
function toggleLoop(typed) {
if (typed.loop) {
typed.loop = false;
} else {
typed.loop = true;
}
}
</script>
</body>
</html>
body {
font-size: 1.5rem;
}
h2 {
font-size: 1.3rem;
display: inline;
}
/* 想让的光标闪动的话,复制下面的代码 */
.typed-cursor {
opacity: 1;
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink {
50% {
opacity: 0.0;
}
}
@-webkit-keyframes typedjsBlink {
0% {
opacity: 1;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1;
}
}
.typed-fade-out {
opacity: 0;
transition: opacity .25s;
-webkit-animation: 0;
animation: 0;
}
.typed-bg {
background-color: #333;
opacity: .7;
max-width: 95%;
border-radius: 12px;
padding: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.