Tạo hiệu ứng cầu vòng với HTML5 và CSS

DEMO

Thời nay, hiệu ứng rất quan trọng trong việc trang trí cho trang của mình trở nên đầy đủ màu sắc để thu hút nhiều ánh mắt, nhiều lượt yêu thích. Hôm nay mình sẽ hướng dẫn bạn cách tạo hiệu ứng cầu vòng Rainbow Effect cheekyvới HTML5 và CSS.

1/ Phần HTML

Đầu tiên ta phải có 1 bố cục thật hợp lí để nó có thể chạy được tốt hơn và hoạt động ổn định. Địa hình của nó được sắp xếp thông qua HTML.

Rainbow Effect - Tạo hiệu ứng cầu vòng với HTML5 và CSS
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Rainbow Effect</title>
    </head>
    <body>
        <div class="team">
            <div class="cap">
                <div class="c0 c1"></div>
                <div class="c0 c2"></div>
                <div class="c0 c3"></div>
                <div class="c0 c4"></div>
                <div class="c0 c5"></div>
                <div class="c0 c6"></div>
                <div class="c0 c7"></div>
                <div class="c0 c8"></div>
                <div class="c0 c9"></div>
                <div class="c0 c10"></div>
                <div class="c0 c11"></div>
                <div class="c0 c12"></div>
                <div class="c0 c13"></div>
                <div class="c0 c14"></div>
                <div class="c0 c15"></div>
                <div class="c0 c16"></div>
                <div class="c0 c17"></div>
                <div class="c0 c18"></div>
                <div class="c0 c19"></div>
                <div class="c0 c20"></div>
                <div class="c0 c10"></div>
                <div class="c0 c21"></div>
                <div class="c0 c22"></div>
                <div class="c0 c23"></div>
                <div class="c0 c24"></div>
                <div class="c0 c25"></div>
                <div class="c0 c26"></div>
                <div class="c0 c27"></div>
                <div class="c0 c28"></div>
                <div class="c0 c29"></div>
                <div class="c0 c30"></div>
                <div class="c0 c31"></div>
                <div class="c0 c32"></div>
                <div class="c0 c33"></div>
                <div class="c0 c34"></div>
                <div class="c0 c35"></div>
                <div class="cvr"></div>
            </div>
        </div>
    </body>
</html>

2/ Phần CSS

Tiếp theo sẽ là phần tạo hiệu ứng và trang trí lại các thành phần với các thuộc tính của CSS.

Rainbow Effect - Tạo hiệu ứng cầu vòng với HTML5 và CSS
* {
    margin:0;
    padding:0;
}
@media (max-width:425px){
    .team .cap {
        transform:scale(0.9);
    }
}
.team {
    width:100vw;
    height:100vh;
    background-color:#000;
    display:flex;
    justify-content:center;
    align-items:center;
}
.team .cap {
    width:450px;
    height:450px;
    background-color:transparent;
    display:flex;
    justify-content:center;
    align-items:center;
}
.team .cap .cvr {
    width:450px;
    height:225px;
    background-color:#000;
    z-index:99;
    position:relative;
    top:112px;
}
.team .cap .c0 {
    position:absolute;
    background-color:transparent;
    border-radius:50%;
    border-width:2.5px;
    border-style:solid;
    border-color:transparent;
    transform:rotateZ(135deg);
}
.team .cap .c1 {
    width:25px;
    height:25px;
    border-top-color:#9400D3;
    border-right-color:#9400D3;
    animation:spin 2s ease-out 3.5s infinite alternate;
}
.team .cap .c2 {
    width:37px;
    height:37px;
    border-top-color:#9400D3;
    border-right-color:#9400D3;
    animation:spin 2s ease-out 3.4s infinite alternate;
}
.team .cap .c3 {
    width:49px;
    height:49px;
    border-top-color:#9400D3;
    border-right-color:#9400D3;
    animation:spin 2s ease-out 3.3s infinite alternate;
}
.team .cap .c4 {
    width:61px;
    height:61px;
    border-top-color:#9400D3;
    border-right-color:#9400D3;
    animation:spin 2s ease-out 3.2s infinite alternate;
}
.team .cap .c5 {
    width:73px;
    height:73px;
    border-top-color:#9400D3;
    border-right-color:#9400D3;
    animation:spin 2s ease-out 3.1s infinite alternate;
}
.team .cap .c6 {
    width:85px;
    height:85px;
    border-top-color:#4B0082;
    border-right-color:#4B0082;
    animation:spin 2s ease-out 3s infinite alternate;
}
.team .cap .c7 {
    width:97px;
    height:97px;
    border-top-color:#4B0082;
    border-right-color:#4B0082;
    animation:spin 2s ease-out 2.9s infinite alternate;
}
.team .cap .c8 {
    width:109px;
    height:109px;
    border-top-color:#4B0082;
    border-right-color:#4B0082;
    animation:spin 2s ease-out 2.8s infinite alternate;
}
.team .cap .c9 {
    width:121px;
    height:121px;
    border-top-color:#4B0082;
    border-right-color:#4B0082;
    animation:spin 2s ease-out 2.7s infinite alternate;
}
.team .cap .c10 {
    width:132px;
    height:132px;
    border-top-color:#4B0082;
    border-right-color:#4B0082;
    animation:spin 2s ease-out 2.6s infinite alternate;
}
.team .cap .c11 {
    width:144px;
    height:144px;
    border-top-color:#0000FF;
    border-right-color:#0000FF;
    animation:spin 2s ease-out 2.5s infinite alternate;
}
.team .cap .c12 {
    width:156px;
    height:156px;
    border-top-color:#0000FF;
    border-right-color:#0000FF;
    animation:spin 2s ease-out 2.4s infinite alternate;
}
.team .cap .c13 {
    width:168px;
    height:168px;
    border-top-color:#0000FF;
    border-right-color:#0000FF;
    animation:spin 2s ease-out 2.3s infinite alternate;
}
.team .cap .c14 {
    width:180px;
    height:180px;
    border-top-color:#0000FF;
    border-right-color:#0000FF;
    animation:spin 2s ease-out 2.2s infinite alternate;
}
.team .cap .c15 {
    width:192px;
    height:192px;
    border-top-color:#0000FF;
    border-right-color:#0000FF;
    animation:spin 2s ease-out 2.1s infinite alternate;
}
.team .cap .c16 {
    width:204px;
    height:204px;
    border-top-color:#00FF00;
    border-right-color:#00FF00;
    animation:spin 2s ease-out 2s infinite alternate;
}
.team .cap .c17 {
    width:216px;
    height:216px;
    border-top-color:#00FF00;
    border-right-color:#00FF00;
    animation:spin 2s ease-out 1.9s infinite alternate;
}
.team .cap .c18 {
    width:228px;
    height:228px;
    border-top-color:#00FF00;
    border-right-color:#00FF00;
    animation:spin 2s ease-out 1.8s infinite alternate;
}
.team .cap .c19 {
    width:240px;
    height:240px;
    border-top-color:#00FF00;
    border-right-color:#00FF00;
    animation:spin 2s ease-out 1.7s infinite alternate;
}
.team .cap .c20 {
    width:252px;
    height:252px;
    border-top-color:#00FF00;
    border-right-color:#00FF00;
    animation:spin 2s ease-out 1.6s infinite alternate;
}
.team .cap .c21 {
    width:264px;
    height:264px;
    border-top-color:#FFFF00;
    border-right-color:#FFFF00;
    animation:spin 2s ease-out 1.5s infinite alternate;
}
.team .cap .c22 {
    width:276px;
    height:276px;
    border-top-color:#FFFF00;
    border-right-color:#FFFF00;
    animation:spin 2s ease-out 1.4s infinite alternate;
}
.team .cap .c23 {
    width:288px;
    height:288px;
    border-top-color:#FFFF00;
    border-right-color:#FFFF00;
    animation:spin 2s ease-out 1.3s infinite alternate;
}
.team .cap .c24 {
    width:300px;
    height:300px;
    border-top-color:#FFFF00;
    border-right-color:#FFFF00;
    animation:spin 2s ease-out 1.2s infinite alternate;
}
.team .cap .c25 {
    width:312px;
    height:312px;
    border-top-color:#FFFF00;
    border-right-color:#FFFF00;
    animation:spin 2s ease-out 1.1s infinite alternate;
}
.team .cap .c26 {
    width:324px;
    height:324px;
    border-top-color:#FF7F00;
    border-right-color:#FF7F00;
    animation:spin 2s ease-out 1s infinite alternate;
}
.team .cap .c27 {
    width:336px;
    height:336px;
    border-top-color:#FF7F00;
    border-right-color:#FF7F00;
    animation:spin 2s ease-out 0.9s infinite alternate;
}
.team .cap .c28 {
    width:348px;
    height:348px;
    border-top-color:#FF7F00;
    border-right-color:#FF7F00;
    animation:spin 2s ease-out 0.8s infinite alternate;
}
.team .cap .c29 {
    width:360px;
    height:360px;
    border-top-color:#FF7F00;
    border-right-color:#FF7F00;
    animation:spin 2s ease-out 0.7s infinite alternate;
}
.team .cap .c30 {
    width:372px;
    height:372px;
    border-top-color:#FF7F00;
    border-right-color:#FF7F00;
    animation:spin 2s ease-out 0.6s infinite alternate;
}
.team .cap .c31 {
    width:384px;
    height:384px;
    border-top-color:#FF0000;
    border-right-color:#FF0000;
    animation:spin 2s ease-out 0.5s infinite alternate;
}
.team .cap .c32 {
    width:396px;
    height:396px;
    border-top-color:#FF0000;
    border-right-color:#FF0000;
    animation:spin 2s ease-out 0.4s infinite alternate;
}
.team .cap .c33 {
    width:408px;
    height:408px;
    border-top-color:#FF0000;
    border-right-color:#FF0000;
    animation:spin 2s ease-out 0.3s infinite alternate;
}
.team .cap .c34 {
    width:420px;
    height:420px;
    border-top-color:#FF0000;
    border-right-color:#FF0000;
    animation:spin 2s ease-out 0.2s infinite alternate;
}
.team .cap .c35 {
    width:432px;
    height:432px;
    border-top-color:#FF0000;
    border-right-color:#FF0000;
    animation:spin 2s ease-out 0.1s infinite alternate;
}
@keyframes spin {
    0% {transform:rotateZ(135deg);}
    100% {transform:rotateZ(315deg);}
}

3/ Lời kết

Qua bài viết này, mình đã hướng dẫn cho bạn cách tạo hiệu ứng cầu vòng với HTML5 và CSS cực dễ dàng. Freetuts hi vọng nó sẽ giúp ích cho bạn việc cải thiện hiệu ứng cho Web/Wap của bạn thêm đẹp mắt và cái nhìn bắt mắt hơn về các cầu vòng.

Trong bài tiếp theo, Freetuts sẽ hướng dẫn cho bạn nhiều hiệu ứng hơn nhé!.

Hẹn gặp lại trong bài viết tiếp theo.

Khóa học nên xem

Nguồn: freetuts.net