Menyambut Natal tahun 2014 bagi yang merayakan, eksperimen ini layak anda uji coba di website dan blog anda. Dengan teknologi CSS3 dan browser modern (Firefox, Chrome, Safari, Opera) kita bisa menikmati animasi pohon natal yang unik tanpa menggunakan library tambahan seperti Flash atau GIF.
Siapkan, file HTML yang akan disisipi animasi ini. Tambahkan baris berikut:
[sourcecode language=”html”]
<div id="container">
<div id="tree">
<div class="layer">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="layer">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="layer">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="layer">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
[/sourcecode]
Kemudian tambahkan style CSS3 berikut pada file CSS anda:
[sourcecode language=”css”]
/*
Copyright (c) 2010 Sebastien P.
http://twitter.com/_sebastienp
MIT licensed.
—
A full CSS 3D rotating Christmas tree using
CSS3 animation, transforms, gradients etc.
The text size can be adjusted to make the tree
zoom in.
Only works in recent Webkit-based browsers.
Fallbacks :
– http://yfrog.us/20kzsz (video)
– http://yfrog.com/h2eodej (picture)
*/
/* Create a Webkit animation called "rotation" */
@-webkit-keyframes rotation {
from {
-webkit-transform: rotateY(0)
}
to {
-webkit-transform: rotateY(360deg)
}
}
/* Set some global styles for the container div */
#container {
font-size: 200%;
padding: 50px;
position: relative;
-webkit-perspective: 800;
}
/*
Initiate the rotation animation on the tree div.
The use of "preserve-3d" is really important here.
*/
#tree {
-webkit-animation: rotation 20s infinite linear;
-webkit-transform-style: preserve-3d
}
/* Set some different angle transforms to the layer divs */
.layer:nth-child(2) {
-webkit-transform: rotateY(45deg)
}
.layer:nth-child(3) {
-webkit-transform: rotateY(90deg)
}
.layer:nth-child(4) {
-webkit-transform: rotateY(135deg)
}
/*
This is the trick to make some full CSS triangles.
Combination of "left" and "negative" margin-left
is for horizontal centering.
*/
.layer > div {
border: 1em solid transparent;
content: "";
height: 0;
left: 50%;
margin-left: -1em;
position: absolute;
top: 0;
width: 0
}
/* Set some different color changes to the triangles */
.layer:nth-child(1) > div {
border-bottom-color: #090
}
.layer:nth-child(2) > div {
border-bottom-color: #080
}
.layer:nth-child(3) > div {
border-bottom-color: #070
}
.layer:nth-child(4) > div {
border-bottom-color: #060
}
/* Set some different size changes to the triangles */
.layer > div:nth-child(2) {
font-size: 1.5em
}
.layer > div:nth-child(3) {
font-size: 2em
}
.layer > div:nth-child(4) {
font-size: 2.5em
}
.layer > div:nth-child(5) {
font-size: 3em
}
/* Add some Christmas balls to the tree */
.layer > div:not(:nth-child(5))::before,
.layer > div:not(:nth-child(5))::after {
content: "";
display: block;
height: 0.25em;
position: absolute;
top: 0.875em;
width: 0.25em;
-webkit-border-radius: 0.25em
}
.layer > div:not(:nth-child(5))::before {
left: -1.125em;
}
.layer > div:not(:nth-child(5))::after {
right: -1.125em;
}
/* Set the Christmas balls colors nearly random style */
.layer > div:nth-child(odd):not(:nth-child(5))::after,
.layer > div:nth-child(even)::before {
background: -webkit-gradient(
linear,
right top,
left bottom,
from(#ff0),
to(#000)
) #ff0;
}
.layer > div:nth-child(odd):not(:nth-child(5))::before,
.layer > div:nth-child(even)::after {
background: -webkit-gradient(
linear,
right top,
left bottom,
from(#f00),
to(#000)
) #f00;
}
[/sourcecode]
Dan, lihat hasilnya:
Lihat demo aslinya di JSFidle: http://jsfiddle.net/h8wrM/68/. Terimakasih untuk om Sebastien Paul.
Oh ya, SELAMAT NATAL 2014 BAGI TEMEN-TEMEN YANG MERAYAKAN!