Ambik tajuk filem Melayu yg ditayangkan di panggung wayang pada tahun 80an, buat demo animasi CSS. Bukan demo di jalan raya.
Klik
NI kalau nak tau tentang filem berkenaan.
Demo
HTML view ▼
<div style="background-color: #f3f3f3; font-family: helvetica, arial, sans-serif; height: 590px;">
<div class="labu"><a href="https://ms.wikipedia.org/wiki/Esok_Masih_Ada" target="_blank" rel="nofollow">EsokMasihAda</a></div></div>
<style>
@keyframes labi {
0 {
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) translateY(-50%) rotate(360deg);
}
}
.labu {
color: #fffbf1;
text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
font-size: 65px;
font-weight: bold;
text-decoration: none;
letter-spacing: -5px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.labu:before,
.labu:after {
content: '';
padding: .9em .4em;
position: absolute;
left: 50%;
width: 100%;
top: 50%;
display: block;
border: 15px solid red;
transform: translateX(-50%) translateY(-50%) rotate(0deg);
animation: 10s infinite alternate ease-in-out labi;
}
.labu:before {
border-color: #d9524a #d9524a rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
z-index: -1;
}
.labu:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d9524a #d9524a;
box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);
}
</style>
CSS disesuaikan untuk paparan di blog ini, dipetik dari
codepen
Ulasan