ES6 扩展运算符练习Demo——鼠标触碰每个字符显示动画

最新推荐文章于 2022-10-19 10:18:16 发布

今天代码敲了吗

最新推荐文章于 2022-10-19 10:18:16 发布

阅读量275

点赞数

分类专栏： ES6 文章标签： css 字符串 js es6/es7

本文链接：https://blog.csdn.net/z772330927/article/details/106068463

版权

ES6 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>