<style> /*鼠標跟隨小圓圈*/ .mouseCircle {animation: textPopup 1s;width: 10px;height: 10px;border:1px solid #CCCC9A;border-radius: 50%;position: absolute;z-index: 99; } @keyframes textPopup {0%, 100% {opacity: 0;}5% {opacity: 1;}100% {width:20px;height:20px;transform: translateY(-50px); } } </style> 復制代碼<script>var mouseCircle = function () {document.documentElement.addEventListener('mousemove', function (event) {var x = event.pageX, y = event.pageY;var mouseCircle = document.createElement('div');mouseCircle.className = 'mouseCircle';this.appendChild(mouseCircle);// 動畫結束后刪除自己mouseCircle.addEventListener('animationend', function () {mouseCircle.parentNode.removeChild(mouseCircle);});// 位置mouseCircle.style.left = (x - mouseCircle.clientWidth / 2) + 'px';mouseCircle.style.top = (y - mouseCircle.clientHeight-10) + 'px';}); document.documentElement.addEventListener('click', function (event) {var x = event.pageX, y = event.pageY;var mouseCircle = document.createElement('div');mouseCircle.className = 'mouseCircle';this.appendChild(mouseCircle);// 動畫結束后刪除自己mouseCircle.addEventListener('animationend', function () {mouseCircle.parentNode.removeChild(mouseCircle);});// 位置mouseCircle.style.left = (x - mouseCircle.clientWidth / 2) + 'px';mouseCircle.style.top = (y - mouseCircle.clientHeight-10) + 'px';}); };mouseCircle(); </script> 復制代碼

codepen.io/loejin/pen/…

轉載于:https://juejin.im/post/5c92119f6fb9a0710b726460

總結

以上是生活随笔為你收集整理的鼠标跟随小圆圈的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。