<div class="shapes-container">
<div class="circle circle-01"></div>
<div class="rectangle rectangle-01"></div>
<div class="circle circle-02"></div>
<div class="rectangle rectangle-02"></div>
</div>
/* Basic layout */
body {
background: #283866;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.shapes-container {
width: 600px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.circle {
width: 200px;
height: 200px;
background: #C0F20C;
border-radius: 50%;
}
.circle-02 {
background: #DC366E;
}
.rectangle {
width: 65px;
height: 280px;
background: #0CEAF2;
}
.rectangle-02 {
background: #00A1FF;
}
/* Tweak positions */
.circle-01 {
transform: translate(-9px, -15px);
}
.rectangle-01 {
transform: translate(0, 10px) rotate(15deg);
}
.circle-02 {
transform: translate(-3px, 3px);
}
.rectangle-02 {
transform: translate(-4px, 15px) rotate(-8deg);
}
/* Animate on hover */
@keyframes shake-circle-01 {
0% { transform: translate(-8px, -14px); }
33% { transform: translate(-10px, -14px); }
66% { transform: translate(-10px, -16px); }
100% { transform: translate(-8px, -16px); }
}
.circle-01:hover {
animation: shake-circle-01 .1s infinite alternate;
}
@keyframes shake-circle-02 {
0% { transform: translate(-2px, 2px); }
33% { transform: translate(-2px, 4px); }
66% { transform: translate(-4px, 4px); }
100% { transform: translate(-4px, 2px); }
}
.circle-02:hover {
animation: shake-circle-02 .1s infinite alternate;
}
@keyframes shake-rectangle-01 {
0% { transform: translate(-1px, 9px) rotate(14deg); }
33% { transform: translate(-1px, 11px) rotate(16deg); }
66% { transform: translate(1px, 11px) rotate(14deg); }
100% { transform: translate(1px, 9px) rotate(16deg); }
}
.rectangle-01:hover {
animation: shake-rectangle-01 .16s infinite alternate;
}
@keyframes shake-rectangle-02 {
0% { transform: translate(-3px, 14px) rotate(-7deg); }
33% { transform: translate(-3px, 16px) rotate(-9deg); }
66% { transform: translate(-5px, 16px) rotate(-7deg); }
100% { transform: translate(-5px, 14px) rotate(-9deg); }
}
.rectangle-02:hover {
animation: shake-rectangle-02 .16s infinite alternate;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.