make melon wiggle
This commit is contained in:
parent
8cfe80e3b3
commit
5257bd7a1e
2 changed files with 14 additions and 1 deletions
|
@ -12,7 +12,7 @@
|
|||
<div id="main">
|
||||
<div id="title">
|
||||
<div>
|
||||
<img src="../static/site/logo.png">
|
||||
<img src="../static/site/logo.png" id="melon">
|
||||
</div>
|
||||
<div>
|
||||
<h1>Pick something?</h1>
|
||||
|
|
|
@ -54,3 +54,16 @@ p{
|
|||
#image-container {
|
||||
transition: opacity 0.5s ease; /* Fade transition */
|
||||
}
|
||||
|
||||
|
||||
@keyframes wiggle {
|
||||
0% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(10deg); }
|
||||
50% { transform: rotate(-10deg); }
|
||||
75% { transform: rotate(10deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
#melon {
|
||||
animation: wiggle 2s ease infinite; /* Adjust duration and timing function for desired effect */
|
||||
}
|
Loading…
Add table
Reference in a new issue