Buat banner animasi guna CSS sahaja

Demo

Orandableg's• 

🙄 sebuah blog

GAMBAR
BERITACERITA DLL- TAKDA BERITA PALSU

Catat ulasan

Dikuasakan oleh Blogger
Orandableg's

↻

HTML view ▼

<span style="font-size: x-small;">Demo</span><br/>
<div style="border: 1px solid; border-radius: 8px; padding: 15px 4px;"><div class="myblogt"><span><a href="https://orandableg.blogspot.com/" style="color: #844329;">Orandableg's</a></span><span>•</span><span style="background: #134f5c; opacity: 0; position: absolute; text-shadow: none;">&nbsp;</span></div>
<div class="desc" style="font-family: sans-serif;">🙄 sebuah blog </div><br/><br/>
<div class="sekuer" style="background: linear-gradient(45deg, #444444 50%, #f3f3f3 60%); height: 220px; margin: 0px 20px; padding-top: 6px;"><span>GAMBAR<br/><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhTImG5Q0E7KEPdYH5kM0T6OQqZT8z6m2fnoE0cTBsWuSt-JGiKKz-qksvXlbqYHyJliSNDqZypXy54ALEb16bs3rMfpcNZyyf3NfLUfPsJpO9celwXgfokufAEt807rWZkyQlOEo8bjza2MQw_2Hzi-pCobQIm3k8vxblqff3OtBuebZQ0u3SRbM2j=s1633"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhTImG5Q0E7KEPdYH5kM0T6OQqZT8z6m2fnoE0cTBsWuSt-JGiKKz-qksvXlbqYHyJliSNDqZypXy54ALEb16bs3rMfpcNZyyf3NfLUfPsJpO9celwXgfokufAEt807rWZkyQlOEo8bjza2MQw_2Hzi-pCobQIm3k8vxblqff3OtBuebZQ0u3SRbM2j=s140"/></a></span><span>BERITA</span><span>CERITA DLL</span><span>- TAKDA BERITA PALSU</span></div><br/><br/>
  <div class="relle" style="font-size: x-small; padding-left: 15px;">Catat ulasan</div>
<div class="att" style="text-align: center; height: 50px; overflow: hidden; margin-top: 50px;"><span><a href="https://www.blogger.com/" rel="nofollow" style="font-family: sans-serif; font-size: x-small;">Dikuasakan oleh Blogger</a><br/><span style="font-size: x-small;">Orandableg's</span></span></div></div>
<style type="text/css">
  .myblogt {
    color: #844329;
    font: 40px Trebuchet;
    text-shadow: #cccccc 0px 1px 0px, #c9c9c9 0px 2px 0px, #bbbbbb 0px 3px 0px, #b9b9b9 0px 4px 0px, #aaaaaa 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.2) 0px 3px 5px, rgba(0, 0, 0, 0.25) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.15) 0px 20px 20px;    
  }
.myblogt span {
  display: inline-block;
}
.myblogt span:nth-child(1) {
  animation: bab 7s ease-out;
}
@keyframes bab {
0% {
  opacity: 0;
  }
50% {
  opacity: 0; text-shadow: none;
  }
55% {
  opacity: 1; text-shadow: none;
  }
60% {
  opacity: 1; text-shadow: #cccccc 0px 1px 0px, #c9c9c9 0px 2px 0px, #bbbbbb 0px 3px 0px, #b9b9b9 0px 4px 0px, #aaaaaa 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.2) 0px 3px 5px, rgba(0, 0, 0, 0.25) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.15) 0px 20px 20px; 
  }
 }
.myblogt span:nth-child(2) {
  animation: bib 7s ease-out;
}
@keyframes bib {
0% {
   opacity: 0;
  }
39% {
  opacity: 0; transform: translateY(0vh); 
  }
44% {
  opacity: 1; transform: translateY(-5vh); 
  }
48% {
  transform: translateY(2vh);
  }
52% {
  transform: translateY(-1vh);
  }
58% {
  transform: translateY(0vh);
  }
 }
.myblogt span:nth-child(3) {
  animation: bob 7s ease-out;
}
@keyframes bob {
0% {
  left: 36px; opacity: 1; width: 0px;  
  }
20% {
   left: 36px; width: 0px; 
  }
30% {
  left: 36px; width: 290px; 
  }
40% {
   left: 322px; opacity: 1; width: 0px;
  }
50% {
  left: 322px; opacity: 0; width 0px;
  }
 }
.desc {
  animation: bub 7s ease-out;
}
@keyframes bub {
0% {
   opacity: 0;
  }
55% {
  opacity: 0; transform: translateY(-2vh); 
  }
60% {
  opacity: 1; transform: translateY(0vh); 
  }
 }
  .sekuer span {
    color: #ffffff;
    font-family: sans-serif;
    font-weight: bold;
  display: block;
    margin-left: 12px;
    padding-top: 2px;
}
  .sekuer {
  animation: blab 7s ease-out;
}
@keyframes blab {
0% {
  height: 0px; opacity: 0; 
  }
50% {
  opacity: 0; 
  }
55% {
   height: 0px; opacity: 1; 
  }
65% {
  height: 220px; opacity: 1; 
  }
70% {
   opacity: 1; 
  }
80% {
  opacity: 1; 
  }
 }
  .sekuer span:nth-child(1) {
  animation: pae 7s ease-out;
}
@keyframes pae {
0% {
  opacity: 0; 
  }
73% {
   opacity: 0; font-size: 10px;
  }
75% {
  opacity: 1; font-size: 24px;
  }
79% {
   font-size: 13px;
  }
 }
  .sekuer span:nth-child(2) {
  animation: pie 7s ease-out;
}
@keyframes pie {
0% {
  opacity: 0; 
  }
83% {
   opacity: 0; font-size: 10px;
  }
85% {
  opacity: 1; font-size: 24px;
  }
89% {
   font-size: 13px;
  }
 }
  .sekuer span:nth-child(3) {
  animation: poe 7s ease-out;
}
@keyframes poe {
0% {
  opacity: 0; 
  }
93% {
   opacity: 0; font-size: 10px;
  }
95% {
  opacity: 1; font-size: 24px;
  }
99% {
  font-size: 13px;
  }
 }
  .sekuer span:nth-child(4) {
  animation: pued 8s ease-out;
}
@keyframes pued {
0% {
  opacity: 0; 
  }
91% {
   opacity: 0; font-size: 10px;
  }
93% {
   opacity: 1; font-size: 24px;
  }
96% {
   font-size: 13px;
  }
 }
  .att span {
  display: block;
}
  .att span {
  animation: blued 9s ease-out;
}
@keyframes blued {
0% {
  transform: translateY(6vh);   
  }
95% {
   transform: translateY(6vh);  
  }
100% {
  transform: translateY(0vh);  
  }
 }
  .relle {
  animation: blib 9s ease-out;
}
@keyframes blib {
0% {
  opacity: 0; 
  }
90% {
  opacity: 0; 
  }
91% {
   opacity: 1;  
  }
 }
</style>

Tutup