🍞Text Result.
- 🍿效果展示🥪
- 🙅? 第 1 步 - 搭建基本結構
- 🙅? 第 2 步 - 使用 js 包裹每一個文字
- 🙅? 第 3 步 - 給每一個 span 系結 mouseenter 事件
- 🙅? 第 4 步 - 撰寫 CSS 代碼讓他動起來😤
- 🙅? 最后一步 - 添加 animationend 事件，
- 完整代碼 - 😏
大家好我是智障 人稱“吳簽”
接下來給大家帶來的是一個 非常炫酷的文字效果😎 里面使用了javascript的函式reduce來創建span包裹每一個文字，然后使用 classList.add 添加來完成影片效果，最后再使用一個影片時間 animationend 來洗掉類，😁
🍿效果展示🥪
🙅? 第 1 步 - 搭建基本結構
這里我們使用一個div進行對文字的包裹，后面使用js代碼來創建任意標簽來包括我們的文字，😍
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>炫酷文字效果</title>
</head>
<body>
<div>chengjisimi love zhangxi</div>
</body>
</html>
🙅? 第 2 步 - 使用 js 包裹每一個文字
第一步😫：我們先獲取檔案上面的 div，
var div = document.querySelector("div");
第二步🥱：使用 textContent 獲取 div 里面的值，轉化為陣列，
let text = div.textContent.split("");
第三步😮：使用 reduce 創建包裹每一個文字，
text.reduce(function (pre,cut,index) {
pre == index ? (div.innerHTML = "");
let span = document.createElement("span");
span.innerHTML = cut;
div.appendChild(span);
},0)
🙅? 第 3 步 - 給每一個 span 系結 mouseenter 事件
text.reduce(function (pre,cut,index) {
pre == index ? (div.innerHTML = "");
let span = document.createElement("span");
span.innerHTML = cut;
div.appendChild(span);
span.addEventListener("mouseenter",function () {
span.classList.add("color");
});
},0)
🙅? 第 4 步 - 撰寫 CSS 代碼讓他動起來😤
* {
padding:0;
margin:0;
}
body {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
width:100vw;
background: #34495e;
}
div {
text-align: center;
font-size: 5em;
font-weight: bold;
color: rosybrown;
/* 字都變大寫 */
text-transform: uppercase;
}
div>span {
position: relative;
display: inline-block;
}
.color {
animation: color;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes color {
50% {
color: seagreen;
transform: scale(2);
}
to {
color: skyblue;
transform: scale(0.5);
}
}
🙅? 最后一步 - 添加 animationend 事件，
text.reduce(function (pre, cur, index, arr) {
span.addEventListener("animationend", function () {
this.classList.remove("color");
});
}, 0)
完整代碼 - 😏
🎎🎏🎟
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #34495e;
}
div {
text-align: center;
font-size: 5em;
font-weight: bold;
color: rosybrown;
text-transform: uppercase;
}
div>span {
position: relative;
display: inline-block;
}
.color {
animation: color;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes color {
50% {
color: seagreen;
transform: scale(2);
}
to {
color: skyblue;
transform: scale(0.5);
}
}
</style>
</head>
<body>
<div>chengjisimi love zhangxi</div>
<script>
const div = document.querySelector("div");
div.textContent.split("").reduce(function (pre, cur, index, arr) {
pre == index && (div.innerHTML = "");
let span = document.createElement("span");
span.innerHTML = cur;
div.appendChild(span);
span.addEventListener("mouseenter", function () {
this.classList.add("color");
});
span.addEventListener("animationend", function () {
this.classList.remove("color");
});
}, 0)
</script>
</body>
</html>
要是喜歡的話，就評論 點贊 收藏把~~~謝謝大家！！！！！🛴🛴🛴🛴🛴🛴
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291055.html
標籤：其他
上一篇：JavaScript學習（九十三）—選擇排序和冒泡排序
下一篇：Vue基礎入門