Entah kenapa akhir" ini lagi seneng"a main animasi,mungkin lagi bosen buat template kali ya?wkwkwk,padahal dari dulu paling males pakai keyframe karena agak berat,apalagi kalau di browser mozilla.ggrrrr malesin bgt deh=___=".saya buat beberapa experimen coba" dan hasil'a ada yg seperti hedaer saya,dan efek menarik lainya.tapi yang seperti di header saya tidak bisa dishare,karena udah nyatu ama header blog saya,mana yg dicopas jg udah lupa,n ribet==v,tapi contoh" dibawah ini tidak kalah menarik juga loh.daripada css HTMLa dibuang sayang,saya share aja deh.beberapa animasi diantara'a,mungkin cenderung lebih bagus di browser google chrome daripada mozilla firefox.meskipun udah diupdate browser mozilla'a ke yang paling baru,tp tetap aja masih menang google chrome kalau soal CSS3.
nah,langsung aja saya dah sediain demo + CSS + HTMLnya.masih ada yang gatau css sama html'a mau ditaruh dimana?ckckck=="
#Indonesian ._.
Htmlnya bisa di masukan di layout blog kamu,add a gadget=>html/javkascript,lalu copas dan simpan.
atau juga dimanapun yang kamu mau.
<body> isi html </body>
css/a diatas /b:skin
do you know what I mean?
1. Animasi dengan keyframe CSS3
Sliding text background color
HTML
Ganti tanda pagar dengan URL link kamu
<div class="menuku">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
CSS
.menuku {background:#000;width:auto;margin: 5px;}
.menuku ul {
padding:10px;
font-family:"helvetica neue", helvetica, arial, sans-serif;
font-weight:700;
line-height:1.8;
color:#fff;
padding-left:5px;
text-shadow: 0 1px 1px transparent;
float:left;}
.menuku ul li {
clear:left;
font-size:.9em;
background:-webkit-linear-gradient(0, #3FB1E7 50%, #fff 50%);
float:left;
cursor:default;
background-position:100% 0;
background-size:200% 100%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-transition:background-position .4s cubic-bezier(0,0,.5,1);
-moz-background-clip:text;
-moz-text-fill-color:transparent;
-moz-transition:background-position .4s cubic-bezier(0,0,.5,1);}
.menuku ul li:hover {
background-position:0 0;}
Animated text background gambar
Johanes
HTML
<div class="textanimasi1">
Johanes</div>
CSS
@-webkit-keyframes slide {
0% { background-position:0 0; opacity:0; }
2% { background-position:2% 2%; opacity:1; }
99% { background-position:99% 99%; }
100% { background-position:100% 100%; opacity:0; }
}
.textanimasi1 {
text-align:center;
letter-spacing:-.08em;
font:700 9.4em helvetica, sans-serif;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnFfyMkkTB75H5OTftglBJZcmDRlMMoPPP_O0jMaAAbSCjIMLKccpG2PaI6cb9Y1G-kMSJloYKtmoycZI4LG0ggM_Qp8e8_PdN1eeXMfrvYgP7RlXR8SNh3sJ5KydO5G72DZ-BQHxkY9M/s1600/bg.jpg);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:slide 60s linear infinite;
-moz-background-clip:text;
-moz-text-fill-color:transparent;
-moz-animation:slide 60s linear infinite;
text-shadow: 0 1px 1px transparent;
}
Animated text background gradient
Johanes
HTML
<div class="textanimasi2">
Johanes</div>
CSS
.textanimasi2{
.textanimasi2{
text-align:center;
letter-spacing:-.08em;
background: -webkit-gradient(linear,left top,right bottom,from(#E51D66),to(#705170));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation:slide1 5s linear infinite;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-moz-animation:slide1 5s linear infinite;
background: -moz-gradient(linear,left top,right bottom,from(#E51D66),to(#705170));
font:700 9.4em helvetica, sans-serif;
text-shadow: 0 1px 1px transparent;}
@-webkit-keyframes slide1 {
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes slide1 {
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}
Johanes
HTML
<div class="textanimasi3">Johanes</div>
CSS
.textanimasi3{
text-align:center;
letter-spacing:-.08em;
color:#E51D66;
font:700 9.4em helvetica, sans-serif;
text-shadow: 0px 0px 0px #ddd, 0x 0px 0px #ddd;
-webkit-animation:text1 10s linear infinite;
-moz-animation:text1 10s linear infinite;
height: 100px;
}
@-webkit-keyframes text1 {
0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
}
@-moz-keyframes text1 {
0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
}
Johanes
Johanes
HTML
<div class="textwrapper">
<div class="textanimasi4">Johanes</div>
<div class="textanimasi5">Johanes</div>
</div>
CSS
.textanimasi4{
text-align:center;
letter-spacing:-.08em;
color: rgba(255, 0, 0, 0.3 );
font:700 9.4em helvetica, sans-serif;
-webkit-animation:text4 3s linear infinite;
-moz-animation:text4 3s linear infinite;
height: 100px;top:0px;position:absolute;
text-shadow: 0 1px 1px transparent;
}
.textanimasi5{
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 0, 255, 0.3 );
font:700 9.4em helvetica, sans-serif;
-webkit-animation:text5 3s linear infinite;
-moz-animation:text5 3s linear infinite;
height: 100px;top:0px;position:absolute;
text-shadow: 0 1px 1px transparent;
}
.textwrapper{position:relative;height: 100px;}
@-webkit-keyframes text4 {
0% {margin-left:5;}
50% {margin-left:-10px;}
100% {margin-left:5;}
}
@-webkit-keyframes text5 {
0% {margin-left:-5;}
50% {margin-left:10px;}
100% {margin-left:-5;}
}
@-moz-keyframes text4 {
0% {margin-left:5;}
50% {margin-left:-10px;}
100% {margin-left:5;}
}
@-moz-keyframes text5 {
0% {margin-left:-5;}
50% {margin-left:10px;}
100% {margin-left:-5;}
}
Johanes
HTML
<div class="textanimasi6">Johanes</div>
CSS
.textanimasi6{
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 0, 255, 0.3 );
font:700 9.4em helvetica, sans-serif;
-webkit-animation:text6 10s linear infinite;
height: 100px;
text-shadow: 0 1px 1px transparent;
}
@-webkit-keyframes text6 {
0% {color:#74015A;}
25% {color:#FF005E;}
50% {color:#FC537D;}
75% {color:#FBB185;}
90% {color:#FDF9DB;}
100% {color:#74015A;}
}
@-moz-keyframes text6 {
0% {color:#74015A;}
25% {color:#FF005E;}
50% {color:#FC537D;}
75% {color:#FBB185;}
90% {color:#FDF9DB;}
100% {color:#74015A;}
}
Johanes
|
Scaning...
HTML
<div class="textwrapper1">
<div class="textanimasi7">Johanes</div>
<div class="textanimasi8">|</div>
<div class="textanimasi9">Scaning...</div>
</div>
CSS
.textanimasi7, .textanimasi8{
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 0, 255, 0.3 );
font:700 9.4em helvetica, sans-serif;
height: 100px;top:0px;position:absolute;
text-shadow: 0 1px 1px transparent;
}
.textanimasi8 {
-webkit-animation:text8 3s linear infinite;
-moz-animation:text8 3s linear infinite;}
.textwrapper1{position:relative;height: 100px;}
@-webkit-keyframes text8 {
0% {margin-left:0px;}
50% {margin-left:530px;}
100% {margin-left:0px;}
}
@-moz-keyframes text8 {
0% {margin-left:0px;}
50% {margin-left:530px;}
100% {margin-left:0px;}
}
.textanimasi9 {
text-align: center;
letter-spacing: 15px;
color: rgba(0, 255, 0, 0.5 );
font: 700 20px helvetica, sans-serif;
bottom: -20px;
position: absolute;
text-shadow: 0 1px 1px transparent;
width: 100%;
-webkit-animation:text9 2s linear infinite;
-moz-animation:text9 2s linear infinite;
}
@-webkit-keyframes text9 {
0% {color: rgba(0, 255, 0, 0 );}
50% {color: rgba(0, 255, 0, 1 );}
100% {color: rgba(0, 255, 0, 0 );}
}
Sekianlah contoh" experimen saya tentang css3 keyframe~
Semoga bermanfaat :) Arigatou Gozaimasu~xD
Posting Komentar