鼠标点击动画

913 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="domdom"></div>
    <script>
    	const arr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']
    	window.onclick = function (event) {
    	  let dom = document.createElement('div')
    	  dom.style.color = 'red'
    	  dom.style.position = 'fixed'
    	  dom.style.left = event.pageX + 'px'
    	  dom.style.top = event.pageY + 'px'
    	  dom.style.zIndex = 1000
    	  // 随机取arr值
    	  let index = Math.floor(Math.random() * 12)
    	  dom.innerHTML = arr[index]
    	  document.getElementById('domdom').append(dom)
    	  setTimeout(function () {
    		dom.style.transform = 'translateY(-100px)'
    		dom.style.transitionDuration = '1s'
    	  }, 1, setTimeout(function () {
    		document.getElementById('domdom').removeChild(dom)
    	  }, 1000))
    	}
    </script>
</body>
</html>