实现打字效果。
【index.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.head-text {
padding: 80px 0 0 0;
min-height: 215px;
color: #000;
font-size: 2em;
text-shadow: #999 0px 2px 4px;
text-align: center;
}
@media screen and (max-width: 800px) {
.head-text {
padding: 50px 0 0;
min-height: 180px;
font-size: 1.75em;
}
}
@media screen and (max-width: 600px) {
.head-text {
padding: 30px 0 0;
min-height: 150px;
font-size: 1.5em;
}
}
@media screen and (max-width: 550px) {
.head-text {
padding: 20px 0 0;
font-size: 1em;
min-height: 110px;
margin: 0 -100px;
}
}
.typed-cursor {
font-weight: 100;
padding: 0 2px;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation: blink 1s infinite;
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<script src="jquery-3.1.1.js"></script>
<script src="typed.js"></script>
<!-- 建议 ，有利于SEO-->
<div id="typed-strings">
<p>Typed.js is a <strong>jQuery</strong> plugin.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
<script>
$(function() {
$("#typed").typed({
stringsElement: $('#typed-strings')
});
});
</script>
<div class="head-text">
<span class="element"></span>
</div>
<script>
$(function() {
$(".element").typed({
strings: ["First sentence.", "Second sentence.", "Third sentence."],
// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
stringsElement: null,
// typing speed
typeSpeed: 30,
// time before typing starts
startDelay: 100,
// backspacing speed
backSpeed: 0,
// shuffle the strings
shuffle: false,
// time before backspacing
backDelay: 500,
// loop
loop: false,
// false = infinite
loopCount: false,
// show cursor
showCursor: true,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call when done callback function
callback: function() {},
// starting callback function before each string
preStringTyped: function() {},
//callback for every typed string
onStringTyped: function() {},
// callback for reset
resetCallback: function() {}
});
});
</script>
</body>
</html>
网友评论