Paket kursor

Anne Boonchuy

AmphibiaDitambahkan 24 kali

Anne Boonchuy cursor for Chrome - cartoon character pointer with animated hover hand. Cartoon fan art pack.

Tambahkan ke Ekstensi

Meet a custom cursor with Anne Boonchuy, the main character of the Amphibian series, who was pulled into another world with the help of a magic box. Custom cursor with Anne Boonchuy is a good opportunity to change the usual mouse to the fans cursors from Cartoons custom cursors collection for Chrome.

Kursor

Unduh file atau salin kode sematan untuk situs web, React, JavaScript, atau Roblox Anda.

Unduh kursor untuk Windows (.cur)Unduh kursor untuk Roblox

CSSJavaScriptReactRoblox

Tempel CSS ini ke dalam stylesheet Anda. Koordinat hotspot sudah termasuk.

.custom-cursor {
  cursor: url('https://cute-cursor.com/cdn/packs/1014/arrow.png') 66 1, auto;
}

.custom-cursor {
  cursor: url('https://cute-cursor.com/cdn/packs/1014/arrow.png') 66 1, auto;
}

Tempel JavaScript ini untuk menerapkan kursor dengan hotspot yang tepat.

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/1014/arrow.png';
const HOTSPOT_X = 66;
const HOTSPOT_Y = 1;
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/1014/arrow.png';
const HOTSPOT_X = 66;
const HOTSPOT_Y = 1;
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;

Salin komponen React ini dan bungkus konten Anda dengannya.

import React from 'react';

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/1014/arrow.png';
const HOTSPOT_X = 66;
const HOTSPOT_Y = 1;
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/1014/arrow.png';
const HOTSPOT_X = 66;
const HOTSPOT_Y = 1;
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>

Unggah gambar ke Roblox, ganti YOUR_ASSET_ID, lalu tempel LocalScript ini.

-- Roblox custom cursor
-- Image URL: https://cute-cursor.com/cdn/packs/1014/arrow.png
-- Hotspot: 66, 1
-- 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 = 66
local HOTSPOT_Y = 1
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/1014/arrow.png
-- Hotspot: 66, 1
-- 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 = 66
local HOTSPOT_Y = 1
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)

Pointer