<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jq实现文字闪烁输入</title>
<style>
#code p:nth-child(odd) {
color: rgb(157, 35, 228);
}
#code p:nth-child(even) {
color: red;
}
#code p:nth-child(1) {
color: red;
}
#code p:nth-child(2) {
color: rgb(240, 27, 134);
}
#code p:nth-child(3) {
color: rgb(173, 230, 203);
}
#code p:nth-child(4) {
color: rgb(40, 228, 65);
}
</style>
</head>
<body>
<div id="code">
<p>/**</p>
<p>*2020-17-20</p>
<p>*代码自动闪烁输入</p>
<p>*/</p>
<p>2020-17-20,I want to say:</p>
<p>Baby, I love you forever!</p>
<p>
They tell you in school that it's the lungs that keep you breathing,but
it's your heart.
</p>
<p>
And it's as if I never really even knew love until right now,in this
moment with you.
</p>
<h4>注意:cv到浏览器第一次打开或者刷新都可</h4>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
typewriter("code");
});
function typewriter(id) {
var $ele = document.getElementById(id);
var str = $ele.innerHTML,
progress = 0;
$ele.innerHTML = "";
var timer = setInterval(function () {
var current = str.substr(progress, 1);
if (current == "<") {
progress = str.indexOf(">", progress) + 1;
} else {
progress++;
}
$ele.innerHTML = str.substring(0, progress) + (progress & 1 ? "_" : "");
if (progress >= str.length) {
clearInterval(timer);
}
}, 75);
}
</script>
jq实现文字闪烁输入
猜你喜欢
转载自blog.csdn.net/weixin_49295874/article/details/127989053
今日推荐
周排行