ES6 扩展运算符练习Demo
鼠标触碰每个字符显示动画
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.completed{
color: blue;
}
.completed span{
cursor: pointer;
display: inline-block;
transition: transform 0.25s;
}
.completed span:hover{
transform: translateY(-20px) rotate(10deg) scale(2);
}
</style>
</head>
<body>
<h2 class='completed'>Holle World!</h2>
<script>
const completed=document.querySelector('.completed');
completed.innerHTML=wrapWithspan(completed.textContent)
console.log(wrapWithspan(completed.textContent));
function wrapWithspan(word){
return [...word].map(letter=>`<span>${letter}</span>`).join('');
}
</script>
</body>
</html>
效果图
想了解更多的ES6扩展运算符知识