Bộ con trỏ

Kawaii Cat Unicorn

The Kawaii Cat Unicorn custom cursor is a great opportunity to decorate your screen with a cute element.

Thêm vào tiện ích mở rộng

The cat unicorn in Kawaii style as a mouse cursor is a delightful sight! With its chubby body, pastel-colored fur, and shimmering golden horn, it's sure to bring a smile to your face. Its big, round eyes are filled with wonder, and its tiny paws are always ready to pounce on anything that catches its fancy. It's the perfect way to add a touch of magic to your computer screen! The Kawaii Cat Unicorn custom cursor is a great opportunity to decorate your screen with a cute element.

Con trỏ

Tải tệp xuống hoặc sao chép mã nhúng cho trang web, React, JavaScript hoặc Roblox của bạn.

Tải con trỏ cho Windows (.cur)Tải con trỏ cho Roblox

CSSJavaScriptReactRoblox

Dán đoạn CSS này vào stylesheet của bạn. Tọa độ điểm nóng đã được bao gồm sẵn.

.custom-cursor {
  cursor: url('https://cute-cursor.com/cdn/packs/9926/arrow.png') 36 0, auto;
}

.custom-cursor {
  cursor: url('https://cute-cursor.com/cdn/packs/9926/arrow.png') 36 0, auto;
}

Dán đoạn JavaScript này để áp dụng con trỏ với điểm nóng chính xác.

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/9926/arrow.png';
const HOTSPOT_X = 36;
const HOTSPOT_Y = 0;
const CURSOR_FALLBACK = 'auto';

const cursorValue = `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`;

// Apply to the whole page
document.body.style.cursor = cursorValue;

// Or apply to a specific element
// const target = document.querySelector('.my-element');
// if (target) target.style.cursor = cursorValue;

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/9926/arrow.png';
const HOTSPOT_X = 36;
const HOTSPOT_Y = 0;
const CURSOR_FALLBACK = 'auto';

const cursorValue = `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`;

// Apply to the whole page
document.body.style.cursor = cursorValue;

// Or apply to a specific element
// const target = document.querySelector('.my-element');
// if (target) target.style.cursor = cursorValue;

Sao chép thành phần React này và bọc nội dung của bạn bằng nó.

import React from 'react';

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/9926/arrow.png';
const HOTSPOT_X = 36;
const HOTSPOT_Y = 0;
const CURSOR_FALLBACK = 'auto';

export default function CustomCursor({ children, className = '', as: Tag = 'div', style = {}, ...props }) {
  const cursorStyle = {
    cursor: `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`,
    ...style,
  };

  return (
    <Tag className={className} style={cursorStyle} {...props}>
      {children}
    </Tag>
  );
}

// Usage:
// <CustomCursor>Your content</CustomCursor>

import React from 'react';

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/9926/arrow.png';
const HOTSPOT_X = 36;
const HOTSPOT_Y = 0;
const CURSOR_FALLBACK = 'auto';

export default function CustomCursor({ children, className = '', as: Tag = 'div', style = {}, ...props }) {
  const cursorStyle = {
    cursor: `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`,
    ...style,
  };

  return (
    <Tag className={className} style={cursorStyle} {...props}>
      {children}
    </Tag>
  );
}

// Usage:
// <CustomCursor>Your content</CustomCursor>

Tải hình ảnh lên Roblox, thay thế YOUR_ASSET_ID, sau đó dán LocalScript này.

-- Roblox custom cursor
-- Image URL: https://cute-cursor.com/cdn/packs/9926/arrow.png
-- Hotspot: 36, 0
-- Size: 128x128
-- 1. Upload the image to Roblox and copy rbxassetid
-- 2. Replace YOUR_ASSET_ID below
-- 3. Put this LocalScript in StarterPlayer > StarterPlayerScripts

local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")
local Players = game:GetService("Players")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local HOTSPOT_X = 36
local HOTSPOT_Y = 0
local CURSOR_WIDTH = 128
local CURSOR_HEIGHT = 128

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "CustomCursorGui"
screenGui.ResetOnSpawn = false
screenGui.IgnoreGuiInset = true
screenGui.DisplayOrder = 999999
screenGui.Parent = playerGui

local cursor = Instance.new("ImageLabel")
cursor.Name = "CustomCursor"
cursor.BackgroundTransparency = 1
cursor.Size = UDim2.fromOffset(CURSOR_WIDTH, CURSOR_HEIGHT)
cursor.Image = "rbxassetid://YOUR_ASSET_ID"
cursor.ZIndex = 999999
cursor.Parent = screenGui

UserInputService.MouseIconEnabled = false

RunService.RenderStepped:Connect(function()
    local mouseLocation = UserInputService:GetMouseLocation()
    cursor.Position = UDim2.fromOffset(mouseLocation.X - HOTSPOT_X, mouseLocation.Y - HOTSPOT_Y)
end)

-- Roblox custom cursor
-- Image URL: https://cute-cursor.com/cdn/packs/9926/arrow.png
-- Hotspot: 36, 0
-- Size: 128x128
-- 1. Upload the image to Roblox and copy rbxassetid
-- 2. Replace YOUR_ASSET_ID below
-- 3. Put this LocalScript in StarterPlayer > StarterPlayerScripts

local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")
local Players = game:GetService("Players")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local HOTSPOT_X = 36
local HOTSPOT_Y = 0
local CURSOR_WIDTH = 128
local CURSOR_HEIGHT = 128

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "CustomCursorGui"
screenGui.ResetOnSpawn = false
screenGui.IgnoreGuiInset = true
screenGui.DisplayOrder = 999999
screenGui.Parent = playerGui

local cursor = Instance.new("ImageLabel")
cursor.Name = "CustomCursor"
cursor.BackgroundTransparency = 1
cursor.Size = UDim2.fromOffset(CURSOR_WIDTH, CURSOR_HEIGHT)
cursor.Image = "rbxassetid://YOUR_ASSET_ID"
cursor.ZIndex = 999999
cursor.Parent = screenGui

UserInputService.MouseIconEnabled = false

RunService.RenderStepped:Connect(function()
    local mouseLocation = UserInputService:GetMouseLocation()
    cursor.Position = UDim2.fromOffset(mouseLocation.X - HOTSPOT_X, mouseLocation.Y - HOTSPOT_Y)
end)

Con trỏ chuột