Chào các bạn đến hẹn lại lên hôm nay mình sẽ giới thiệu cho các bạn tạo hiệu ứng background đêm dây sao với css3 nhé. Nhìn chung khi nhắc tới CSS3 ai cũng đều biết những hữu ích cực lớn của nó trong thiết kế tạo hiệu ứng phải không nào.
1. Tạo background nền
Để tạo background cho toàn trang tất nhiên chúng ta sẽ sử dụng thẽ body de định dạng phải không nào. đầu tiên ta sẽ tạo một background có màu đen và và một chúc hiệu ứng màu sắc sử dụng gradient
body {
background-color: black;
/* Webkit */
background-image: -webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent) );
/* Firefox */
background-image: -moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px);
}
Chúng ta sẽ được một background như thế này.
2. Tao hiệu ứng ngôi sao
Tiếp theo chúng ta sẽ tạo ra những chùm sao trên background đoạn css của cúng ta bây giờ sẽ là.
body {
background-color: black;
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(circle, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(circle, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Background images size */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
/* Background images position*/
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
Chúng ta sẽ được background nhu sau.
Vậy là chúng ta đã hoàng tất quá trình tạo một background đêm đầy sao rồi nhé. và đương nhiên chung ta sẽ
3. Tạo hiệu ứng CSS3
thêm một chút hiệu ứng sử dụng CSS3 cho thêm lung linh nhé.
body {
background-color: black;
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Background Attributes */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
/* Animation */
animation-name: movement;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* Firefox */
-moz-animation-name: movement;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
/* Webkit */
-webkit-animation-name: movement;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-moz-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-webkit-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
Xong rồi đấy các bạn hãy xem thử thành quả của mình nhé. Hy vong giúp ích được cho bạn nào dang muốn tạo hiệu ứng lung linh cho website cua minh.
Chúc các bạn thành công nhé
