CSS Rotating Border Animation Effects - Border Animation Using CSS3 Keyframes

Bài viết này mình sẽ giới thiệu tới các bạn một hiệu ứng liên quan tới Rotating Border Animation, đơn giản bằng CSS3 và HTML ai cũng có thể thực hiện được.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi minus, fuga accusamus cumque ipsa exercitationem rerum magnam qui voluptas eveniet.
<div id="box">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="text-container">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <div class="des">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi minus, fuga accusamus cumque ipsa exercitationem rerum magnam qui voluptas eveniet.
        </div>
    </div>
</div>

#box {
    width: 300px;
    height: 300px;
    background-color: #262626;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    position: relative;
    background-color: #001e2d;
    overflow: hidden;
    -webkit-box-shadow: 0 20px 50px rgba(0,0,0,.5);
            box-shadow: 0 20px 50px rgba(0,0,0,.5);
    border: 2px solid rgba(0,0,0,0.5);
    padding: 15px;
    .text-container {
        color: #fff;
        padding: 15px;
        border:2px solid #ffeb3b;
        text-align: center;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.5);
                box-shadow: 0 5px 10px rgba(0,0,0,.5);
        text-align: center;
        position: relative;
        z-index: 2;
        height: -webkit-fill-available;
        h3 {
            margin-bottom: 10px;
        }
    }
    > span {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #0093ff;
            -webkit-animation: animation 4s linear infinite;
                    animation: animation 4s linear infinite;
        }
        &:nth-child(1) {
            -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        &:nth-child(2) {
            -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
            &:before {
                -webkit-animation-delay: -2s;
                        animation-delay: -2s;
            }
        }
        &:nth-child(3) {
            -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                    transform: rotate(180deg);
        }
        &:nth-child(4) {
            -webkit-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                    transform: rotate(270deg);
            &:before {
                -webkit-animation-delay: -2s;
                        animation-delay: -2s;
            }
        }
    }
    &:before {
        content: "";
        position: absolute;
        top:0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,.1);
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        pointer-events: none;
    }
    &:hover {
        &:before {
            left: -50%;
            -webkit-transform: skewX(-5deg);
                -ms-transform: skewX(-5deg);
                    transform: skewX(-5deg);
        }
    }
}
@-webkit-keyframes animation {
    0% {
        -webkit-transform: scalex(0);
                transform: scalex(0);
        -webkit-transform-origin: left;
                transform-origin: left;
    }
    50% {
        -webkit-transform: scalex(1);
                transform: scalex(1);
        -webkit-transform-origin: left;
                transform-origin: left;
    }
    50.1% {
        -webkit-transform: scalex(1);
                transform: scalex(1);
        -webkit-transform-origin: right;
                transform-origin: right;
    }
    100% {
        -webkit-transform: scalex(0);
                transform: scalex(0);
        -webkit-transform-origin: right;
                transform-origin: right;
    }
}
@keyframes animation {
    0% {
        -webkit-transform: scalex(0);
                transform: scalex(0);
        -webkit-transform-origin: left;
                transform-origin: left;
    }
    50% {
        -webkit-transform: scalex(1);
                transform: scalex(1);
        -webkit-transform-origin: left;
                transform-origin: left;
    }
    50.1% {
        -webkit-transform: scalex(1);
                transform: scalex(1);
        -webkit-transform-origin: right;
                transform-origin: right;
    }
    100% {
        -webkit-transform: scalex(0);
                transform: scalex(0);
        -webkit-transform-origin: right;
                transform-origin: right;
    }
}

0 thảo luận về CSS Rotating Border Animation Effects - Border Animation Using CSS3 Keyframes

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục