Author: | guillaume-rygn |
---|---|
Views Total: | 1,075 views |
Official Page: | Go to website |
Last Update: | January 9, 2023 |
License: | MIT |
Preview:

Description:
A modern interactive fluid custom mouse cursor built on top of Vanilla JavaScript and CSS3 animations.
How to use it:
1. Download and load the following files in your document.
<link rel="stylesheet" href="style.css" /> <script src="index.js"></script>
2. That’s it. Override the default styles of the fluid cursor.
.mscursor-cursor { pointer-events: none; position: fixed; display: block; border-radius: 0; top: 0; left: 0; z-index: 9999999999999999; } .mscursor-difference{ mix-blend-mode: difference; } .mscursor-circle { transform-origin: center; position: absolute; display: block; width: 26px; height: 26px; border-radius: 20px; } .mscursor-border-transform{ animation: border-transform 3s linear infinite; } @keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } .mscursor-scale{ transition: .5s ease; transform: scale(1.6); } .mscursor-scale-outline{ transform:scale(1.9); background-color: transparent !important; } .mscursor-nocursor{ cursor:none!important; }