CSS Border Animation.CSS Animation.

No video

CSS Border Animation.CSS Animation.

Рет қаралды 69,558

Күн бұрын

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.

Пікірлер: 34

@lalahoiland8689 10 ай бұрын

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 7 ай бұрын

😂thanks bro

@tyrus2640 6 ай бұрын

Thanks buddy 😂

@nicolanomathemba9023 4 ай бұрын

Thanks

@tuhineashin6084 Жыл бұрын

Nice Design

@kasoa.thourcans124 6 ай бұрын

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

@hugocangi6214 8 күн бұрын

muy bueno gracias

@meto4545 Ай бұрын

Full ctrl + c: * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: rgb(4, 75, 97); } .box { position: relative; width: 300px; height: 400px; display: flex; justify-content: center; align-items: center; background-color: black; overflow: hidden; border-radius: 20px; } .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); } }

@KILR-pr1hc 4 ай бұрын

how did the white spaces appeared? i didnt understand that

@VishalVaishali-oz5op Ай бұрын

Bhai me phone se speed 1s pr bahut aacha animated ho raha h

@logachandrana1779 6 ай бұрын

**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!

@aizazkhan6155 Ай бұрын

CTRL + C * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: rgb(0, 75, 97); } .box { position: relative; width: 300px; height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 20px; background-color: rgb(0, 0, 0); z-index: 1; } .box::before { content: ''; position: absolute; width: 180PX; height: 140%; background-color: rgb(255 255 255); box-shadow: 0 0 20PX rgb(8, 8, 8); animation: animate 4s linear infinite; z-index: 1; } .box::after { content: ''; position: absolute; inset: 10px; background-color: rgb(4, 75, 97); border-radius: 16px; z-index: 1; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@user-jh2kx1qr7t 6 ай бұрын

cool video)

@moussasamake8621 3 ай бұрын

Thank you

@LauchmarkBlessed 7 ай бұрын

cool but try with some tex inside

@kasoa.thourcans124 6 ай бұрын

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

@TheCurea Жыл бұрын

thx

@VishalVaishali-oz5op Ай бұрын

Bhai 5 color ek saath kaise round kare

@afriend8961 7 ай бұрын

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 7 ай бұрын

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

@afriend8961 7 ай бұрын

@@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 7 ай бұрын

@@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 6 ай бұрын

@@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

@user-no2jx5wb1j Жыл бұрын

provide the code bro in the comment section

@mikesalinas6245 3 ай бұрын

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); } }