整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
用JavaScript实现文字逐步展现的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript文字动画</title>
</head>
<body>
<div class="container"></div>
</body>
<script>
const containerEI=document.querySelector(".container");
const careers=["跟着我","每天学习一点点","让你不再枯燥","不再孤单"];
let careerIndex=0;
let characterIndex=0;
updateText();
function updateText() {
characterIndex++;
containerEI.innerHTML=`
<h1>JavaScript文字动画${careers[careerIndex].slice(0,characterIndex)}</h1>
`;
if(characterIndex===careers[careerIndex].length){
careerIndex++;
characterIndex=0;
}
if(careerIndex===careers.length){
careerIndex=0;
}
setTimeout(updateText,400);
}
</script>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
background-color: #fd946a;
font-family: "Permanent Marker", cursive;
}
</style>
</html>
学习点：
1、document.querySelector()返回container元素的信息
2、innerHTML：更改html元素的内容，可以设置或返回表格行的开始和结束标签之间的HTML
3、slice(参数1，参数2) :从已有的数组中返回选定的元素
参数1：从何处开始选取
参数2：从何处结束选取
4、setTimeout()：定时执行一个函数或指定的一段代码
使用JavaScript完成文字的逐步展现，可以做一个简短的动画，让界面更加生动有趣。
图1
图2
图3
图5
「链接」
果图
嗨，长友们大家好
今天分享的是一款黑色个性的线性动态效果导航菜单代码，CSS3镜像文字导航菜单动画特效。
废话不多说上代码
<script>
//For Demo only
var links=document.getElementsByClassName('link')
for(var i=0; i <=links.length; i++)
addClass(i)
function addClass(id){
setTimeout(function(){
if(id > 0) links[id-1].classList.remove('hover')
links[id].classList.add('hover')
}, id*750)
}
</script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3线性动态效果文字导航菜单动画特效</title>
<style>
html, body{
padding:0px;
margin:0px;
font-family: 'Raleway', sans-serif;
color:#FFF;
height:100%;
}
body{
background:rgba(0, 0, 0, 0.5);
}
.container{
max-width:200px;
background:rgba(0, 0, 0, 0.75);
margin:40px auto;
padding:10px 0px 20px 0px;
border:1px solid #111;
border-radius:4px;
box-shadow:0px 4px 5px rgba(0, 0, 0, 0.75);
}
.link{
font-size:16px;
font-weight:300;
text-align:center;
position:relative;
height:40px;
line-height:40px;
margin-top:10px;
overflow:hidden;
width:90%;
margin-left:5%;
cursor:pointer;
}
.link:after{
content: '';
position:absolute;
width:80%;
border-bottom:1px solid rgba(255, 255, 255, 0.5);
bottom:50%;
left:-100%;
transition-delay: all 0.5s;
transition: all 0.5s;
}
.link:hover:after,
.link.hover:after{
left:100%;
}
.link .text{
text-shadow:0px -40px 0px rgba(255, 255, 255, 1);
transition:all 0.75s;
transform:translateY(100%) translateZ(0);
transition-delay:all 0.25s;
}
.link:hover .text,
.link.hover .text{
text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
transform:translateY(0%) translateZ(0) scale(1.1);
font-weight:600;
}</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="container">
<div class="link">
<div class="text">首页</div>
</div>
<div class="link">
<div class="text">关于我们</div>
</div>
<div class="link">
<div class="text">产品中心</div>
</div>
<div class="link">
<div class="text">项目案例</div>
</div>
<div class="link">
<div class="text">人才招聘</div>
</div>
<div class="link">
<div class="text">联系我们</div>
</div>
</div>
<script>
//For Demo only
var links=document.getElementsByClassName('link')
for(var i=0; i <=links.length; i++)
addClass(i)
function addClass(id){
setTimeout(function(){
if(id > 0) links[id-1].classList.remove('hover')
links[id].classList.add('hover')
}, id*750)
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.aaa-cg.com.cn?lcc" target="_blank">素材</a></p>
</div>
</body>
</html>
*请认真填写需求信息，我们会在24小时内与您取得联系。
