以下是今天每日一练的最终效果：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>【每日一练】204—文本鼠标效果</title><link rel=”stylesheet” href=”index.css”></head><body><section class=”container”><h1>Hi 你好, 这里是web前端开发</h1></section><section></section><div class=”cursor”></div><script src=”index.js”></script></body></html>
CSS:
*{padding: 0;margin: 0;box-sizing: border-box;}*{cursor: none;}body{overflow-x: hidden;}section{min-height: 100vh;background-color: rgb(41, 42, 46);width: 100%;display: flex;align-items: center;justify-content: center;color: white;}.cursor{position: absolute;top: 0;left: 0;/* border: 2px solid white; *//* background-color: rgba(255, 255, 255, 0.356); */height: 30px;width: 30px;border-radius: 50px;transform: translate(-50%, -50%);pointer-events: none;}.cursor::after,.cursor::before{content: ”;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;height: 10px;width: 10px;border-radius: 50px;}.cursor::before{background-color: rgb(255, 255, 255);}.cursor.click::before{animation: click 1s ease forwards;background-color: rgb(255, 255, 255);}@keyframes click{0%{opacity: 1;transform:translate(-50%, -50%) scale(1);}100%{opacity: 0;transform: translate(-50%, -50%) scale(7);}}
JS:
const cursor = document.querySelector(‘.cursor’);window.addEventListener(‘mousemove’, (e) => {cursor.style.left = e.pageX + ‘px’;cursor.style.top = e.pageY + ‘px’;cursor.setAttribute(‘data-fromTop’, (cursor.offsetTop – scrollY));// console.log(e)});window.addEventListener(‘scroll’, () => {const fromTop = cursor.getAttribute(‘data-fromTop’);cursor.style.top = scrollY + parseInt(fromTop) + ‘px’;console.log(scrollY);});window.addEventListener(‘click’, () => {if (cursor.classList.contains(‘click’)) {cursor.classList.remove(“click”);void cursor.offsetWidth; // trigger a DOM reflowcursor.classList.add(“click”);} else {cursor.classList.add(“click”);}});
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
