Trang chủShare Hiệu ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo
Mình cũng chưa từng làm site nào mà áp dụng hiệu ứng CSS3 Đẹp và Độc Đáo như thế này.
Nếu những ai đang xem bài viết này thấy nó phù hợp với trang của mình thì hãy sử dụng.
Hiệu ứng này tương đối nhẹ mình có để DEMO trực tiếp ở bên dưới.
Cái hiệu ứng CSS3 này khá teen phù hợp cho các site chat play nhạc video rất Dễ Thương.
Bên trên là DEMO trực tiếp về hiệu ứng Preload CSS3 quá Đẹp. Nếu các bạn muốn sử dụng thì Copy mã HTML và CSS bên dưới vào web của các bạn
HTML:
Nếu thấy thích thì mang về mà test!
Cập nhật nhiều code hơn nữa tại ChiaseIT.Mobie.In .
Nguồn: codeseo.net
hieu-ung-preload.zip (1.11KB)
Nếu những ai đang xem bài viết này thấy nó phù hợp với trang của mình thì hãy sử dụng.
Hiệu ứng này tương đối nhẹ mình có để DEMO trực tiếp ở bên dưới.
Cái hiệu ứng CSS3 này khá teen phù hợp cho các site chat play nhạc video rất Dễ Thương.
Bên trên là DEMO trực tiếp về hiệu ứng Preload CSS3 quá Đẹp. Nếu các bạn muốn sử dụng thì Copy mã HTML và CSS bên dưới vào web của các bạn
.wrapper {
width: 100%;
height: 100%;
}
.wrapper {
position: relative;
background: #e7f0f7;
}
.progressbar {
display: block;
position: absolute;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 400px;
height: 30px;
}
.progressbar::before,
.progressbar::after {
content: '';
display: block;
position: absolute;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
background-image: -webkit-linear-gradient(0deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
background-position: 0 0;
background-repeat: repeat-x;
-webkit-animation: movebar 5s linear infinite;
animation: movebar 5s linear infinite;
}
.progressbar::before {
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1);
}
.progressbar::after {
z-index: 9;
top: 6px;
-webkit-filter: blur(16px);
filter: blur(16px);
opacity: 0.7;
}
.stylization {
position: absolute;
z-index: 999;
height: 4px;
width: 90%;
left: 5%;
top: 6px;
opacity: 0.3;
}
.stylization::before,
.stylization::after {
content: '';
display: block;
position: absolute;
height: 4px;
top: 0;
border-radius: 2px;
}
.stylization::before {
background: #fff;
left: 0;
right: 10px;
}
.stylization::after {
width: 6px;
background: #fff;
right: 0;
}
@-webkit-keyframes movebar {
from {
background-position: 0 0;
}
to {
background-position: 400px 0;
}
}
@keyframes movebar {
from {
background-position: 0 0;
}
to {
background-position: 400px 0;
}
width: 100%;
height: 100%;
}
.wrapper {
position: relative;
background: #e7f0f7;
}
.progressbar {
display: block;
position: absolute;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 400px;
height: 30px;
}
.progressbar::before,
.progressbar::after {
content: '';
display: block;
position: absolute;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
background-image: -webkit-linear-gradient(0deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
background-position: 0 0;
background-repeat: repeat-x;
-webkit-animation: movebar 5s linear infinite;
animation: movebar 5s linear infinite;
}
.progressbar::before {
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1);
}
.progressbar::after {
z-index: 9;
top: 6px;
-webkit-filter: blur(16px);
filter: blur(16px);
opacity: 0.7;
}
.stylization {
position: absolute;
z-index: 999;
height: 4px;
width: 90%;
left: 5%;
top: 6px;
opacity: 0.3;
}
.stylization::before,
.stylization::after {
content: '';
display: block;
position: absolute;
height: 4px;
top: 0;
border-radius: 2px;
}
.stylization::before {
background: #fff;
left: 0;
right: 10px;
}
.stylization::after {
width: 6px;
background: #fff;
right: 0;
}
@-webkit-keyframes movebar {
from {
background-position: 0 0;
}
to {
background-position: 400px 0;
}
}
@keyframes movebar {
from {
background-position: 0 0;
}
to {
background-position: 400px 0;
}
HTML:
<div class="wrapper">
<div class="progressbar">
<div class="stylization"></div>
</div>
</div>
<div class="progressbar">
<div class="stylization"></div>
</div>
</div>
Nếu thấy thích thì mang về mà test!
Cập nhật nhiều code hơn nữa tại ChiaseIT.Mobie.In .
Nguồn: codeseo.net
hieu-ung-preload.zip (1.11KB)