指向按钮的鼠标光标

下载代码

html

css

分享到微信朋友圈

html

css

.cursor {
  --r: 0deg;
  position: fixed;
  left: -8px;
  top: -6px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: none;
  -webkit-transform: translate(var(--x), var(--y));
          transform: translate(var(--x), var(--y));
  -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
          filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.cursor svg {
  display: block;
  width: 28px;
  height: 28px;
  -webkit-transform: rotate(var(--r));
          transform: rotate(var(--r));
}

.btn {
  --background: #5628EE;
  --shadow: rgba(84, 40, 238, .16);
  --y: 0;
  display: table;
  text-align: center;
  padding: 12px 24px;
  border-radius: 4px;
  color: #fff;
  background: var(--background);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 4px 12px var(--shadow);
  -webkit-transform: translateY(var(--y));
          transform: translateY(var(--y));
  transition: box-shadow .3s ease, -webkit-transform .3s ease;
  transition: box-shadow .3s ease, transform .3s ease;
  transition: box-shadow .3s ease, transform .3s ease, -webkit-transform .3s ease;
}
.btn:hover {
  --y: -2px;
  box-shadow: 0 8px 16px var(--shadow);
}
.btn:active {
  --y: 1px;
  box-shadow: 0 4px 8px var(--shadow);
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F5F9FF;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}

JavaScript

$(document).ready(function() {

let container = $('body'),
        element = $('.btn');

let cursor = $('<div />').addClass('cursor').html('<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><polygon fill="#FFFFFF" points="8.2,20.9 8.2,4.9 19.8,16.5 13,16.5 12.6,16.6 "/><polygon fill="#FFFFFF" points="17.3,21.6 13.7,23.1 9,12 12.7,10.5 "/><rect x="12.5" y="13.6" transform="matrix(0.9221 -0.3871 0.3871 0.9221 -5.7605 6.5909)" width="2" height="8"/><polygon points="9.2,7.3 9.2,18.5 12.2,15.6 12.6,15.5 17.4,15.5 "/></svg>').appendTo(container)

container.css('cursor', 'none');

$(document).on('mousemove', e => {
        cursor.toggle($(e.target).is(container));
        cursor.css({
            '--x': e.pageX + 'px',
            '--y': e.pageY + 'px',
            '--r': calculateRotate(cursor, element) + 20 + 'deg'
        });
    });
    
    container.on('mouseleave', e => {
       cursor.hide(); 
    });

function calculateRotate(elem, to) {
        let offset = elem.offset(),
            toOffset = to.offset(),
            center = {
                x: offset.left + elem.outerWidth() / 2,
                y: offset.top + elem.outerHeight() / 2
            },
            toCenter = {
                x: toOffset.left + to.outerWidth() / 2,
                y: toOffset.top + to.outerHeight() / 2
            },
            radians = Math.atan2(toCenter.x - center.x, toCenter.y - center.y),
            degree = (radians * (180 / Math.PI) * -1) + 180;
        return degree;
    }

element.click(e => {
        return false;
    })

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg