Rotating Border with Animation

Written by @kerixa 6 March 2021

There are texts on all sites and visitors to these sites like not to get tired of reading texts. One of the factors that motivates the readers of your contents is to use moving elements such as borders. These animating borders attracts the attention of the audience much more. See the following code example to investigate more.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
* {
    box-sizing: border-box;
    font-family: "Quicksand", sans-serif;
}

html,
body {
    padding: 0;
    margin: 0;
}

body {
    background: #141414;
    min-height: 100vh;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container .card {
	background: #fff0;
	width: 10rem;
	height: 10rem;
	padding: 1rem;
	position: relative;
	margin: 1rem;
	color: #fff;
	overflow: hidden;
}

.container .card .border {
	width: 100%;
	height: 0.25rem;
	top: 0;
	left: -100%;
	position: absolute;
	background: linear-gradient(to right, transparent 50%, #fff);
}

.container .card .border.to-left {
	animation: left 1s linear infinite;
}

.container .card .border.to-bottom {
	width: 0.25rem;
	height: 100%;
	right: 0;
	top: -100%;
	left: initial;
	background: linear-gradient(180deg, transparent 50%, #fff);
	animation: bottom 1s linear infinite;
	animation-delay: 0.5s;
}

.container .card .border.to-right {
	width: 100%;
	height: 0.25rem;
	bottom: 0;
	top: initial;
	right: 0;
	background: linear-gradient(90deg, #fff 50%, transparent);
	animation: right 1s linear infinite;
	animation-delay: 1s;
}

.container .card .border.to-top {
	width: 0.25rem;
	height: 100%;
	bottom: -100%;
	top: initial;
	right: initial;
	left: 0;
	background: linear-gradient(0, transparent 50%, #fff);
	animation: top 1s linear infinite;
	animation-delay: 1.5s;
}

@keyframes left {
    0% {
        transform: translatex(0);
    }

    100% {
        transform: translatex(200%);
    }
}

@keyframes bottom {
    0% {
        transform: translatey(0);
    }

    100% {
        transform: translatey(200%);
    }
}

@keyframes right {
    0% {
        transform: translatex(200%);
    }

    100% {
        transform: translatex(0%);
    }
}

@keyframes top {
    0% {
        transform: translatey(0%);
    }

    100% {
        transform: translatey(-200%);
    }
}

@keyframes color {
    0% {
        filter: rotate-hue(0deg);
    }

    100% {
        filter: rotate-hue(360deg);
    }
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap" rel="stylesheet">

<div class="container">
  <div class="card">
    <div class="border to-left"></div>
        <div class="border to-bottom"></div>
    <div class="border to-right"></div>
    <div class="border to-top"></div>
   Html Free Code
  </div>

</div>
<a target='_blank' href='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Designer Diva, Jirgensons E, vamsi, wapmohin, azmir
advertisement 2