Wobbl/Wobbly-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added wobbling css-effect.

Browse source
This commit is contained in:
The Wobbler 2025-03-03 18:54:40 +01:00
parent 44f3bfbe3e
commit cc62773844
3 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
de.php
View file

@ -137,6 +137,8 @@ echo " </style>";
</div>
<p class="hover-wobble button inout">Lass es wobbeln!</p>
</body>

2
index.php
View file

@ -130,6 +130,8 @@ echo " </style>";
</div>
<p class="hover-wobble button inout">Let it wobble!</p>
</body>

20
styles.php
View file

@ -16,7 +16,7 @@ html:not([data-scroll='0']) .topnav {
}
body {
background-color: #2e2e2e
background-color: #2e2e2e;
}
p {
@ -334,3 +334,21 @@ hr {
border: 2px solid rgba(255, 255, 255, 0.3);
display: inline-block;
}
@keyframes wobbl-animation {
0% {transform: skew(-10deg, -10deg);}
25% {transform: skew(-10deg, 10deg);}
50% {transform: skew(10deg, 10deg);}
75% {transform: skew(10deg, -10deg);}
100% {transform: skew(-10deg, -10deg);}
}
.hover-wobble {
bottom: 16px;
right: 32px;
position: fixed;
}
body:has(.hover-wobble:hover) .background {
animation: wobbl-animation 0.5s infinite;
}