整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
用JavaScript實現(xiàn)文字逐步展現(xiàn)的動畫效果
<!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元素的內(nèi)容，可以設置或返回表格行的開始和結束標簽之間的HTML
3、slice(參數(shù)1，參數(shù)2) :從已有的數(shù)組中返回選定的元素
參數(shù)1：從何處開始選取
參數(shù)2：從何處結束選取
4、setTimeout()：定時執(zhí)行一個函數(shù)或指定的一段代碼
使用JavaScript完成文字的逐步展現(xiàn)，可以做一個簡短的動畫，讓界面更加生動有趣。
圖1
圖2
圖3
圖5
「鏈接」
果圖
嗨，長友們大家好
今天分享的是一款黑色個性的線性動態(tài)效果導航菜單代碼，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線性動態(tài)效果文字導航菜單動畫特效</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">產(chǎn)品中心</div>
</div>
<div class="link">
<div class="text">項目案例</div>
</div>
<div class="link">
<div class="text">人才招聘</div>
</div>
<div class="link">
<div class="text">聯(lián)系我們</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 target="_blank">素材</a></p>
</div>
</body>
</html>
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
