Border Animations

Hello Coders! Welcome to Coding Torque. In this blog, we are going to create amazing border animations using HTML and CSS. You should create these projects if you are a beginner or intermediate-level web developer.

HTML Code

@import url("https://fonts.googleapis.com/css?family=Raleway:400");

* {
box-sizing: border-box;
}

@property –angle {
syntax: ‘<angle>’;
initial-value: 90deg;
inherits: true;
}

@property –gradX {
syntax: ‘<percentage>’;
initial-value: 50%;
inherits: true;
}

@property –gradY {
syntax: ‘<percentage>’;
initial-value: 0%;
inherits: true;
}

body {
font-family: Raleway, sans-serif;
text-align: center;
margin: 0;
padding: 1rem;
background-color: rgba(10, 12, 18, 1);
color: white;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

p {
margin: 0;
}

:root {
–d: 2500ms;
–angle: 90deg;
–gradX: 100%;
–gradY: 50%;
–c1: rgba(168, 239, 255, 1);
–c2: rgba(168, 239, 255, 0.1);
}

.wrapper {
min-width: min(40rem, 100%);
}

.box {
font-size: 3vw;
margin: max(1rem, 3vw);
border: 0.35rem solid;
padding: 3vw;
border-image: conic-gradient(from var(–angle), var(–c2), var(–c1) 0.1turn, var(–c1) 0.15turn, var(–c2) 0.25turn) 30;
animation: borderRotate var(–d) linear infinite forwards;
}

.box:nth-child(2) {
border-image: radial-gradient(ellipse at var(–gradX) var(–gradY), var(–c1), var(–c1) 10%, var(–c2) 40%) 30;
animation: borderRadial var(–d) linear infinite forwards;
}

@keyframes borderRotate {
100% {
–angle: 420deg;
}
}

@keyframes borderRadial {
20% {
–gradX: 100%;
–gradY: 50%;
}
40% {
–gradX: 100%;
–gradY: 100%;
}
60% {
–gradX: 50%;
–gradY: 100%;
}
80% {
–gradX: 0%;
–gradY: 50%;
}
100% {
–gradX: 50%;
–gradY: 0%;
}
}

*{
  margin:0;
  padding:0;
}

.container{ padding-top: 20px;
padding-bottom: 20px;}
body{
background-color: #111845;
}

.background-img{
background-image: url(“https://3.bp.blogspot.com/-piZWCW2uUbg/W2fPXxkWZgI/AAAAAAAAOu0/eydmMjTIqcwLMHEEr2H7imqoRTxMw4o9QCLcBGAs/s1600/among_trees_night_dribbble.png”);
height: 400px;
width: 800px;
background-repeat: no-repeat;
background-size: cover;
margin: 5% auto;
padding:20px;
border: 1px solid #2a3cad;
border-radius: 4px;
box-shadow: 0px 0px 5px #2a3cad;
position: relative;
}

.content h2{ font-size:19px;}

.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background: #111845a6;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgb(23, 32, 90);
border: 2px solid #2a3cad;
color: white;
padding: 20px;
}

.box:before{
content: ”;
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background: rgba(255,255,255,0.1);
transition:0.5s;
pointer-events: none;
}

.box:hover:before{
left:-50%;
transform: skewX(-5deg);
}

.box .content{
position:absolute;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:1px solid #f0a591;
padding:20px;
text-align:center;
box-shadow: 0 5px 10px rgba(9,0,0,0.5);

}

.box span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;

}

.box span:nth-child(1)
{
transform:rotate(0deg);
}

.box span:nth-child(2)
{
transform:rotate(90deg);
}

.box span:nth-child(3)
{
transform:rotate(180deg);
}

.box span:nth-child(4)
{
transform:rotate(270deg);
}

.box span:before
{
content: ”;
position: absolute;
width:100%;
height: 2px;
background: #50dfdb;
animation: animate 4s linear infinite;
}

@keyframes animate {
0% {
transform:scaleX(0);
transform-origin: left;
}
50%
{
transform:scaleX(1);
transform-origin: left;
}
50.1%
{
transform:scaleX(1);
transform-origin: right;

}

100%
{
transform:scaleX(0);
transform-origin: right;

}

}

Code Credits: @ZachSaucier

HTML Code

<div class="svg-wrapper">
  <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="320" />
    <div class="text">ZACH SAUCIER</div>
  </svg>
</div>

html, body {
  background: rgb(20,20,20);
  text-align: center;
  height: 100%;
  overflow: hidden;
}
.svg-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
	  margin: 0 auto;
  width: 320px;  
}
.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  fill: transparent;
  stroke: #19f6e8;
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: 'Roboto Condensed';
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
  top: -48px;
  position: relative;
}
.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}

Code Credits: @t_afif

HTML Code

<h3 class="hover">Hover Me</h3>

.hover {
  border: 8px solid;
  border-image: repeating-linear-gradient(135deg,#F8CA00 0 10px,#E97F02 0 20px,#BD1550 0 30px) 8;
  -webkit-mask: 
    conic-gradient(from 180deg at top 8px right 8px, #0000 90deg,#000 0)
     var(--_i,200%) 0  /200% var(--_i,8px) border-box no-repeat,
    conic-gradient(at bottom 8px left  8px,  #0000 90deg,#000 0)
     0   var(--_i,200%)/var(--_i,8px) 200% border-box no-repeat,
    linear-gradient(#000 0 0) padding-box no-repeat;
  transition: .3s, -webkit-mask-position .3s .3s;
}
.hover:hover {
  --_i: 100%;
  color: #CC333F;
  transition: .3s, -webkit-mask-size .3s .3s;
}

body {
height: 100vh;
margin: 0;
display: grid;
place-content: center;
align-items: center;
}
h3 {
font-family: system-ui, sans-serif;
font-size: 4rem;
margin:0;
cursor: pointer;
padding: 0 .1em;
}