How To Create Quick border Animation effect Only HTML And CSS

Project Introduction: In this project, we are going to implement a car running on a track using HTML and CSS with sound effects.

File structure:

index.html
style.css

HTML code: In the following code , first time open an index.html file then create html Structure. than Inside the body tag must take a <div></div> than take a class this class name anything select than create a <h2></h2> tag any word type inside <h2> tag .

<!DOCTYPE html>

<head>

<title>Quick CSS Border Trick animation</title>

<body>

<h2>animation</h2>

</div>

</body>

</html>

style.css: The following is the code for file “style.css” which is used in the above HTML code.

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: sans-serif;

}

body{

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #0c4563;

}

.box{

position: relative;

width: 300px;

height: 400px;

display: flex;

justify-content: center;

align-items: center;

background: rgba(0, 0, 0, 0.5);

overflow: hidden;

border-radius: 20px;

}

.box::before{

content: '';

width: 150px;

height: 140%;

position: absolute;

background: linear-gradient(#00ccff,#d400d4);

animation: animate 4s linear infinite;

}

.box::after{

content: '';

position: absolute;

inset:4px;

background: #0c4563;

border-radius: 16px;

}

@keyframes animate {

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

.box h2{

color: #fff;

font-size: 3em;

position: relative;

z-index: 10;

text-transform: uppercase;

}

Output :

My facebook page link:

https://www.facebook.com/OnlineCoding560956

Online school 29

How To Create Quick border Animation effect Only HTML And CSS