136 lines
No EOL
3.3 KiB
CSS
136 lines
No EOL
3.3 KiB
CSS
.cursor {
|
|
display: block;
|
|
position: absolute;
|
|
width: 36px;
|
|
height: 60px;
|
|
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 28 28' version='1.1' viewBox='0 0 28 28' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='8.2 20.9 8.2 4.9 19.8 16.5 13 16.5 12.6 16.6' fill='%23fff'/%3E%3Cpolygon points='17.3 21.6 13.7 23.1 9 12 12.7 10.5' fill='%23fff'/%3E%3Crect transform='matrix(.9221 -.3871 .3871 .9221 -5.7605 6.5909)' x='12.5' y='13.6' width='2' height='8'/%3E%3Cpolygon points='9.2 7.3 9.2 18.5 12.2 15.6 12.6 15.5 17.4 15.5'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
transition: top .15s ease-out, left .15s ease-out;
|
|
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ====== *
|
|
Source: https://github.com/codrops/ClickEffects/blob/master/css/component.css
|
|
* ======= */
|
|
.cursor::after {
|
|
position: absolute;
|
|
margin: -35px 0 0 -35px;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
content: '';
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
box-shadow: inset 0 0 0 35px rgba(111,148,182,0);
|
|
}
|
|
|
|
.cursor.clicked::after {
|
|
-webkit-animation: click-animation 0.5s ease-out forwards;
|
|
animation: click-animation 0.5s ease-out forwards;
|
|
}
|
|
|
|
@-webkit-keyframes click-animation {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.4, 0.4, 1);
|
|
transform: scale3d(0.4, 0.4, 1);
|
|
}
|
|
80% {
|
|
box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
|
|
opacity: 0.1;
|
|
}
|
|
100% {
|
|
box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(1.2, 1.2, 1);
|
|
transform: scale3d(1.2, 1.2, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes click-animation {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.4, 0.4, 1);
|
|
transform: scale3d(0.4, 0.4, 1);
|
|
}
|
|
80% {
|
|
box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
|
|
opacity: 0.1;
|
|
}
|
|
100% {
|
|
box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(1.2, 1.2, 1);
|
|
transform: scale3d(1.2, 1.2, 1);
|
|
}
|
|
}
|
|
|
|
.cursor.clickedMobile::after {
|
|
-webkit-animation: anim-effect-sanja 1s ease-out forwards;
|
|
animation: anim-effect-sanja 1s ease-out forwards;
|
|
}
|
|
|
|
@-webkit-keyframes anim-effect-sanja {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.5, 0.5, 1);
|
|
transform: scale3d(0.5, 0.5, 1);
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes anim-effect-sanja {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(0.5, 0.5, 1);
|
|
transform: scale3d(0.5, 0.5, 1);
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.cursor.shaking {
|
|
width: 45px;
|
|
height: 75px;
|
|
-webkit-animation: shaking 0.3s linear;
|
|
animation: shaking 0.3s linear;
|
|
animation-iteration-count: 2;
|
|
}
|
|
|
|
@keyframes shaking {
|
|
0% {
|
|
transform: translate(60px, -60px);
|
|
}
|
|
25% {
|
|
transform: translate(-60px, 60px);
|
|
}
|
|
50% {
|
|
transform: translate(60px, -60px);
|
|
}
|
|
75% {
|
|
transform: translate(-60px, 60px);
|
|
}
|
|
100% {
|
|
transform: translate(60px, -60px);
|
|
}
|
|
} |