定制的性感粉红圆点鼠标

Custom Pink Dot Cursor，可用于时尚购物类网站。

h5, cursor, mouse, pointer

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2215
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var cursor = {
    delay: 8,
    _x: 0,
    _y: 0,
    endX: (window.innerWidth / 2),
    endY: (window.innerHeight / 2),
    cursorVisible: true,
    cursorEnlarged: false,
    $dot: document.querySelector('.cursor-dot'),
    $outline: document.querySelector('.cursor-dot-outline'),

init: function() {
        // Set up element sizes
        this.dotSize = this.$dot.offsetWidth;
        this.outlineSize = this.$outline.offsetWidth;

this.setupEventListeners();
        this.animateDotOutline();
    },

setupEventListeners: function() {
        var self = this;

// Anchor hovering
        document.querySelectorAll('a').forEach(function(el) {
            el.addEventListener('mouseover', function() {
                self.cursorEnlarged = true;
                self.toggleCursorSize();
            });
            el.addEventListener('mouseout', function() {
                self.cursorEnlarged = false;
                self.toggleCursorSize();
            });
        });

// Click events
        document.addEventListener('mousedown', function() {
            self.cursorEnlarged = true;
            self.toggleCursorSize();
        });
        document.addEventListener('mouseup', function() {
            self.cursorEnlarged = false;
            self.toggleCursorSize();
        });

document.addEventListener('mousemove', function(e) {
            // Show the cursor
            self.cursorVisible = true;
            self.toggleCursorVisibility();

// Position the dot
            self.endX = e.pageX;
            self.endY = e.pageY;
            self.$dot.style.top = self.endY + 'px';
            self.$dot.style.left = self.endX + 'px';
        });

// Hide/show cursor
        document.addEventListener('mouseenter', function(e) {
            self.cursorVisible = true;
            self.toggleCursorVisibility();
            self.$dot.style.opacity = 1;
            self.$outline.style.opacity = 1;
        });

document.addEventListener('mouseleave', function(e) {
            self.cursorVisible = true;
            self.toggleCursorVisibility();
            self.$dot.style.opacity = 0;
            self.$outline.style.opacity = 0;
        });
    },

animateDotOutline: function() {
        var self = this;

self._x += (self.endX - self._x) / self.delay;
        self._y += (self.endY - self._y) / self.delay;
        self.$outline.style.top = self._y + 'px';
        self.$outline.style.left = self._x + 'px';

requestAnimationFrame(this.animateDotOutline.bind(self));
    },

toggleCursorSize: function() {
        var self = this;

if (self.cursorEnlarged) {
            self.$dot.style.transform = 'translate(-50%, -50%) scale(0.75)';
            self.$outline.style.transform = 'translate(-50%, -50%) scale(1.5)';
        } else {
            self.$dot.style.transform = 'translate(-50%, -50%) scale(1)';
            self.$outline.style.transform = 'translate(-50%, -50%) scale(1)';
        }
    },

toggleCursorVisibility: function() {
        var self = this;

if (self.cursorVisible) {
            self.$dot.style.opacity = 1;
            self.$outline.style.opacity = 1;
        } else {
            self.$dot.style.opacity = 0;
            self.$outline.style.opacity = 0;
        }
    }
}

cursor.init();

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    font-family: "Open Sans", Helvetica, arial, sans-serif;
    color: #dc5656;
    background-color: #333333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Raleway", "Open Sans", sans-serif;
    text-align: center;
}
a {
    color: #333333;
    text-decoration: none;
}
img {
    max-width: 100%;
}
.header {
    position: relative;
    overflow: visible;
}
.header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 50px;
    height: 2px;
    background-color: #dc5656;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.pen__subheading {
    margin-bottom: 0;
}
.pen__subheading a {
    color: #dc5656;
}
.pen__subheading a:hover,
.pen__subheading a:focus {
    color: #e58080;
}
.container {
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.col {
    padding: 1rem;
}
@media (min-width: 800px) {
    .col {
        width: 50%;
        float: left;
    }
    .col:nth-of-type(2n+1) {
        clear: left;
    }
}
.col.col--full {
    width: 100%;
}
html,
html *,
body,
body * {
    cursor: none;
}
.cursor-dot,
.cursor-dot-outline {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #dc5656;
}
.cursor-dot-outline {
    width: 40px;
    height: 40px;
    background-color: rgba(229, 128, 128, 0.5);
}

HTML

Custom Pink Dot Cursor，可用于时尚购物类网站。

h5, cursor, mouse, pointer

编辑器支持Emmet

快捷键

Custom Pink Dot Cursor，可用于时尚购物类网站。

h5, cursor, mouse, pointer

基于GSAP实现的全屏水平方向幻灯片（支持鼠标拖拉、左右方向箭、底部导航圆点、触摸滑动）

使用jQuery和CSS实现自定义的鼠标交互方式

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：