CSS Border Animation.CSS Animation.

Поделиться
HTML-код
  • Опубликовано: 1 фев 2025

Комментарии • 40

  • @lalahoiland8689
    @lalahoiland8689 Год назад +98

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

  • @tuhineashin6084
    @tuhineashin6084 Год назад +8

    Nice Design

  • @kasoa.thourcans124
    @kasoa.thourcans124 11 месяцев назад +3

    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

    • @LoneDevelopper
      @LoneDevelopper 27 дней назад

      ruclips.net/video/dIUOWdwwZBw/видео.html

  • @meto4545
    @meto4545 7 месяцев назад +2

    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
    @KILR-pr1hc 10 месяцев назад +1

    how did the white spaces appeared? i didnt understand that

  • @AynshetZewduKedene
    @AynshetZewduKedene 11 месяцев назад

    cool video)

  • @afriend8961
    @afriend8961 Год назад +1

    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
      @bn5055 Год назад

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

    • @afriend8961
      @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
      @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
      @kasoa.thourcans124 11 месяцев назад

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

  • @VishalVaishali-oz5op
    @VishalVaishali-oz5op 6 месяцев назад

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

  • @Princya8309
    @Princya8309 4 месяца назад

    Why the inner white box looking like rotate in the background. Didnt move through corner

  • @HussamMohammad-h1e
    @HussamMohammad-h1e 5 месяцев назад

    How can i put a photo inside the box
    Please answer

  • @hugocangi6214
    @hugocangi6214 5 месяцев назад

    muy bueno gracias

  • @VishalVaishali-oz5op
    @VishalVaishali-oz5op 6 месяцев назад

    Bhai 5 color ek saath kaise round kare

  • @moussasamake8621
    @moussasamake8621 8 месяцев назад

    Thank you

  • @aizazkhan6155
    @aizazkhan6155 6 месяцев назад

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

  • @logachandrana1779
    @logachandrana1779 Год назад +7

    **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
    @LauchmarkBlessed Год назад +1

    cool but try with some tex inside

    • @kasoa.thourcans124
      @kasoa.thourcans124 11 месяцев назад

      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
    @TheCurea 2 года назад +2

    thx

  • @davidbulambo6332
    @davidbulambo6332 Год назад +1

    How can I insert a text in the box?

    • @Nexaman18
      @Nexaman18 Год назад +1

      add a this is a text tag inside the div simple

    • @davidbulambo6332
      @davidbulambo6332 Год назад

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

    • @Yadav_nihar
      @Yadav_nihar Год назад +3

      ​@@davidbulambo6332your ishu still not solve?

    • @davidbulambo6332
      @davidbulambo6332 Год назад +1

      @@Yadav_niharnot yet

    • @meditech202
      @meditech202 Год назад

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

  • @mikesalinas6245
    @mikesalinas6245 8 месяцев назад

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

  • @shahabhosseiniashna1710
    @shahabhosseiniashna1710 Год назад

    like

  • @AtulKumar-b3i
    @AtulKumar-b3i Год назад +9

    provide the code bro in the comment section