Tạo cây thông noel với tuyết rơi bằng CSS3

Nhằm tăng thêm không khí cho ngày lễ Giáng Sinh sắp tới, hôm nay mình xin tiếp tục chia sẻ cho các bạn cách tạo cây thông giáng sinh đầy màu sắc với hiệu ứng tuyết rơi cực đẹp, và đặc biệt hợn nữa là chỉ với CSS3 mà không cần phải dùng bất kì đoạn script nào cả.

Xem Demo | Download

Bước 1 : HTML
Đầu tiên, chúng ta cần định dạng html cơ bản như sau :

<div class="container">
            <div class="bottom_snow"></div>
            <div class="tree"></div>
            <div class="tree_bot"></div>
            <div class="ball red"></div>
            <div class="ball green"></div>
            <div class="ball blue"></div>
            <div class="ball red rsmall"></div>
            <div class="ball green gsmall"></div>
            <div class="ball blue bsmall"></div>
            <h1>Happy Holidays</h1>
            <div class="fall_snow"></div>
</div>

Bước 2 : Định dạng CSS

Đầu tiên chúng ta tạo nền với đoạn css sau :

.container {
    height: 500px;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
    awidth: 800px;

    background-color: #0093d8;
    background: -moz-linear-gradient(top, #0093d8, #fff);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #0093d8));

    -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}

Sau đó là chúng ta tạo nền tuyết như sau :

.bottom_snow {
    position: absolute;
    z-index: 5;
    top: 400px;
    left: 50%;
    margin-left: -500px;
    awidth: 1000px;
    height: 1000px;
    background: #e2e2e2;

    border-radius: 1000px;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
}
.bottom_snow:before , .bottom_snow:after {
    background-color: #fff;
    content: "";
    height: 1000px;
    position: absolute;
    top: -25px;
    awidth: 1000px;

    border-radius: 1000px;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
}
.bottom_snow:before {
    left: 400px;
}
.bottom_snow:after {
    right: 400px;
}

Lúc này chúng ta sẽ có được kết quả như sau :

Kế tiếp , chúng ta sẽ tạo cây thông với đoạn CSS sau :

.tree, .tree:before, .tree:after, .tree_bot, .tree_bot:before, .tree_bot:after {
    height: 0;
    position: absolute;
    awidth: 0;

    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
}
.tree {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    left: 390px;
    top: 135px;
}
.tree:before {
    content:';
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid green;
    left: -40px;
    top: 15px;
}
.tree:after {
    content:';
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 60px solid green;
    left: -60px;
    top: 40px;
}
/* tree, bottom side */
.tree_bot {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 80px solid green;
    left: 330px;
    top: 210px;
}
.tree_bot:before {
    content:';
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid green;
    left: -100px;
    top: 40px;
}
.tree_bot:after {
    content:';
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    border-bottom: 120px solid green;
    left: -120px;
    top: 80px;
}

Tiếp theo, chúng ta sẽ tạo các quả trân châu :

.ball {
    height: 40px;
    left: 390px;
    position: absolute;
    top: 345px;
    awidth: 40px;

    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;

    box-shadow: 0 0 5px #777;
    -moz-box-shadow: 0 0 5px #777;
    -webkit-box-shadow: 0 0 5px #777;
}
.red {
    background-color: #c8171f;
    background-image: -webkit-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
    background-image: -moz-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
    background-image: -o-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
    background-image: radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);

    left: 340px;
    top: 325px;
}
.blue {
    background-color: #00a1ee;
    background-image: -webkit-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
    background-image: -moz-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
    background-image: -o-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
    background-image: radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
}
.green {
    background-color: #4d8d00;
    background-image: -webkit-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
    background-image: -moz-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
    background-image: -o-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
    background-image: radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);

    left: 440px;
    top: 325px;
}
.rsmall, .gsmall, .bsmall {
    height: 25px;
    awidth: 25px;
}
.rsmall {
    left: 440px;
    top: 255px;
}
.bsmall {
    left: 350px;
    top: 255px;
}
.gsmall {
    left: 395px;
    top: 275px;
}

Cuối cùng là chúng ta tạo hiệu ứng tuyết đổ :

.fall_snow {
    background-image: url('../images/snow1.png'), url('../images/snow2.png'), url('../images/snow3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    awidth: 100%;

     -webkit-animation: snow 10s linear infinite;
     -moz-animation: snow 10s linear infinite;
     -ms-animation: snow 10s linear infinite;
     animation: snow 10s linear infinite;
}
@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Các bạn có thể tải hình ảnh các bông tuyết về máy ở mục download bài viết. Vậy là chúng ta đã hoàn thành một hiệu ứng đẹp cho ngày lễ giáng sinh, mình mong rằng với bài viết này, các bạn có thể áp dụng cho những website hay blog của mình.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster