<div class="cup">
<div class="vessel">
<div class="tea">→</div>
</div>
<div class="handle"></div>
</div>
<div class="saucer"></div>
<div class="tea">
<div class="sugar"></div>
<div class="sugar"></div>
<div class="bottom"></div>
</div>
.vessel {
width: 300px;
height: 300px;
border-radius: 150px;
}
.vessel {
box-shadow:
20px 20px 100px
rgba( 0, 0, 0, 0.8 );
}
.sugar {
transform:
rotate(70deg) translate(-20px, 20px);
transition:
transform 10s ease-out;
.sugar {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
}
<html lang="en-US">
BODY:lang(en-US) {
background: #519AB8 url(en.png);
}
Вадим Макеев, Opera Software
Презентация: pepelsbey.net/pres/special-effects-tea