Santai. Ngopi di warung kopi

Secawan kopi panas dibuat dengan CSS tulen. Secukup rasa, tanpa skrip.

Demo

Santai. Ngopi di warung kopi.

HTML view ▼

<div style="background: #8acdeb; border-radius: 10px; height: 400px; position: relative;">
<div id="labu">
<div class="steam" id="steam1"> </div>
<div class="steam" id="steam2"> </div>
<div class="steam" id="steam3"> </div>
<div class="steam" id="steam4"> </div>
<div id="cup">
<div id="cup-body">
<div id="cup-shade"></div>
</div>
<div id="cup-handle"></div>
</div>
<div id="piring"></div>
<div id="bayang2"></div>
  <h2>Santai. Ngopi di warung kopi.</h2>
</div>
</div>
<style>
#labu {
position: absolute;
top: 54%;
left: 50%;
transform: translate(-50%, -50%);
}
.steam {
position: absolute;
height: 150px;
width: 150px;
border-radius: 50%;
background-color: #ffffff;
margin-top: -75px;
margin-left: 75px;
z-index: 0;
opacity: 0;
}
#steam1 {
-webkit-animation: steam1 4s ease-out infinite;
animation: steam1 4s ease-out infinite;
}
#steam3 {
-webkit-animation: steam1 4s ease-out 1s infinite;
animation: steam1 4s ease-out 1s infinite;
}
@-webkit-keyframes steam1 {
0% {
transform: translateY(0) translateX(0) scale(0.25);
opacity: 0.2;
}
100% {
transform: translateY(-200px) translateX(-20px) scale(1);
opacity: 0;
}
}
@keyframes steam1 {
0% {
transform: translateY(0) translateX(0) scale(0.25);
opacity: 0.2;
}
100% {
transform: translateY(-200px) translateX(-20px) scale(1);
opacity: 0;
}
}
#steam2 {
-webkit-animation: steam2 4s ease-out 0.5s infinite;
animation: steam2 4s ease-out 0.5s infinite;
}
#steam4 {
-webkit-animation: steam2 4s ease-out 1.5s infinite;
animation: steam2 4s ease-out 1.5s infinite;
}
@-webkit-keyframes steam2 {
0% {
transform: translateY(0) translateX(0) scale(0.25);
opacity: 0.2;
}
100% {
transform: translateY(-200px) translateX(20px) scale(1);
opacity: 0;
}
}
@keyframes steam2 {
0% {
transform: translateY(0) translateX(0) scale(0.25);
opacity: 0.2;
}
100% {
transform: translateY(-200px) translateX(20px) scale(1);
opacity: 0;
}
}
#cup {
z-index: 1;
}
#cup-body {
position: absolute;
height: 200px;
width: 280px;
border-radius: 0 0 150px 150px;
background-color: #fff;
margin: auto;
display: inline-block;
overflow: hidden;
z-index: 1;
}
#cup-shade {
position: relative;
height: 300px;
width: 180px;
background-color: #f3f3f3;
display: inline-block;
margin-left: 42%;
margin-top: -3px;
transform: rotate(50deg);
z-index: 1;
}
#cup-handle {
position: relative;
height: 75px;
width: 70px;
border-radius: 0 140px 140px 0;
border: 15px solid #f3f3f3;
margin-bottom: 95px;
margin-left: 230px;
display: inline-block;
z-index: 0;
}
#piring {
position: absolute;
height: 30px;
width: 280px;
border-radius: 0 0 100px 100px;
background-color: #f9f9f9;
margin-top: -32px;
margin-left: 5px;
z-index: 2;
}
#bayang2 {
height: 10px;
width: 280px;
border-radius: 50%;
margin-top: -5px;
margin-left: 6px;
background-color: #7bb8d4;
}
  </style>

Tutup

CSS disesuaikan untuk paparan di blog ini, dipetik dari codepen/zanewesley