CSS Border Animation.CSS Animation.

In this video I shown how to create Border Animation using HTML and CSS.
Recommended Videos:
1. • Responsive Card #1 Usi...
2. • Footer With HTML&CSS O...
3. • HTML & CSS Responsive ...
Tags:
css animation,css animation effects,css effects,css animation,css loading, css loading effect, css loading animation, html css hover animation, css3 hover animation, css animation, html css anination,css design loding animation,css losding,top css loading animation,best css loading animation,css cool loading animation,loading animation,best cool loading animation,loading animation with css, animation,css loading animations for website,css3 css loading animations for game,game css loading animations,css game loading animation,phython css loading effecst,css game loading effects,css game loading animation,game loading,css loading animation,best css game loading,top best css loading,top css game loading animation,coding,programming,css animation, cool css animation, top5 css animation,javascript, css design animations, best css animations, animation, top best csd animations, css ideas, web css ideas, web css animations, css cool animation, css animations 2022,css best animation, coding short video.
profile card,html css profile card,ui design,css ui design,html css ui design,responsive card design using html css,html css card design,product card html css, css responsive product card, html css product card ui design, ecommerce website using html css, product card ui desig,html css product card,responsive card, html css credit car.product card html css responsive,responsive product card ui design,,e-commerce product card,ecommerce website design,ecommerce website design using html and css,how to make ecommerce website,responsive product card,product card using html and css,ecommerce website using html and css,product card ui design,html and css ecommerce website design,html css product card ui design,product card design html,website design using html and css.

[@lalahoiland8689]

For all you ctrl + c lovers out there:
.box::before{
content: '';
position: absolute;
width: 180px;
height: 140%;
background-color: white;
box-shadow: 0 0 20px rgb(8, 8, 8);
animation: animate 4s linear infinite;
}
.box::after{
content: '';
position: absolute;
inset: 10px;
background-color: rgb(4, 75, 97);
border-radius: 16px;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

[@HarryBasil-fg1xp]

😂thanks bro

[@tyrus2640]

Thanks buddy 😂

[@nicolanomathemba9023]

Thanks

[@tuhineashin6084]

Nice Design

[@moussasamake8621]

Thank you

[@TheCurea]

thx

[@user-jh2kx1qr7t]

cool video)

[@KILR-pr1hc]

how did the white spaces appeared? i didnt understand that

[@shahabhosseiniashna1710]

like

[@kasoa.thourcans124]

For all of you that don't know how this works and want to put something inside of it, it's very simple:
First thing to do, put something inside the div: Some random text here
Second, in the css file you don't need .box::after, but don't remove it, you should change just 1 thing: from .box::after replace the "::after" with " .box_content", resulting in .box .box_content, if you used a different class name for the content inside the .box, just replace the one I used and it will work

[@afriend8961]

I'm having trouble with this and I think due to the following: I'm trying this out on an existing page/project so, I'm not using the body properties you use. Everything else I've used and this doesn't work yet. Do I have to use the body properties (flex) in order for this to work? I'm not using using the asterisk properties, by the way. =).

[@bn5055]

The body classes they're using are centering the card on the page. And...why aren't you using the asterisk properties?

[@afriend8961]

@@bn5055 The asterisk/wildcard properties would affect the other elements on page. As I said, I'm not trying this as a standalone project, just mixing it with others on one page. I think re-classing the properties should be the only way to get this to work, right? =).

[@afriend8961]

@@bn5055 I used a class for the body properties and this still doesn't work. It did make some changes but not working as this does. The only property I'm left to play with is the wildcard but I don't know how to apply this in the HTML. I think the box-sizing property is causing issue. =).

[@kasoa.thourcans124]

@@afriend8961 I would like to help, but it's easier to see the problem instead of reading it, right now I can't see the problem without seeing where you want to apply the border and what can be affecting it

[@logachandrana1779]

**Note**You can add content...


Document

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 20px;
border: 1px solid black;
z-index: 1;
}
.box::before {
content: '';
position: absolute;
width: 88%;
height: 140%;
background-color: rgb(255, 74, 74);
animation: animate 14s linear infinite;
z-index: 1;
}
.box::after {
content: '';
position: absolute;
inset: 10px;
background-color: rgb(194, 239, 255);
border-radius: 16px;
z-index: 1;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.innder-box {
display: block;
z-index: 2;
padding: 20px;
text-align: justify;
text-align: center;
}



content
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veritatis cupiditate voluptatibus obcaecati
sunt. Magnam, modi rem, error corrupti aut rerum necessitatibus eos dicta ea harum dolorem placeat eum
delectus!

[@LauchmarkBlessed]

cool but try with some tex inside

[@kasoa.thourcans124]

Put something inside the div, for example: Hello World, and instead of using ".box::after", just use ".box .box_content" with the same properties, and it should work

[@mikesalinas6245]

HTML

CSS
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 20px;
border: 1px solid black;
z-index: 1;
}
.box::before{
content: '';
position: absolute;
width: 180px;
height: 140%;
background-color: white;
box-shadow: 0 0 20px rgb(8, 8, 8);
animation: animate 4s linear infinite;
}

.box::after{
content: '';
position: absolute;
inset: 10px;
background-color: BLACK; // cambia a tu color favorito
border-radius: 16px;
}

@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

[@user-no2jx5wb1j]

provide the code bro in the comment section

[@davidbulambo6332]

How can I insert a text in the box?

[@Nexaman18]

add a this is a text tag inside the div simple

[@davidbulambo6332]

@@Nexaman18 I've tried it before, and even now, but the text goes outside of the box

[@Yadav_nihar]

​@@davidbulambo6332your ishu still not solve?

[@davidbulambo6332]

@@Yadav_niharnot yet

[@meditech202]

change the z-index 0f the box @@davidbulambo6332