Question

我发现了一个很酷的动画，想要添加到我的投资组合中。问题是我无法在选定的div中放入动画。我希望动画在称为“容器”的第一个div中运行。任何想法这如何工作？我已经尽力尝试了所有方法，但似乎找不到解决方法。

Html:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="profile.css">




    </head>
    <body>


          <!--Navbar-->
                    <div class="container">

                        <header>
                        <ul>
                        <li>About</li>
                        <li>Projects</li>
                        <li>Contact</li>
                        <li>Social Media</li>
                        </ul>
                    </header>
                    <!--End Navbar-->

                       <!-- Image and text -->
                        <h1>Tillix76</h1>
                        <img src="" class="center"  >
                 <h2> Web Developer</h2>
                 <!--background-->
    .ripple-background
    .circle.xxlarge.shade1
    .circle.xlarge.shade2
    .circle.large.shade3
    .circle.mediun.shade4
    .circle.small.shade5    
    <!---End Background--> 
               </div>

    ]




       <!-- Name-->








       <!--About-->
        <div class="container3">
    <p class="about">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit cursus risus at ultrices mi tempus. Massa placerat duis ultricies lacus sed. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Id cursus metusLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit cursus risus at ultrices mi tempus. Massa placerat duis ultricies lacus sed. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Id cursus metus 
    </p>      
          </div>
    <div class="container4">
<!--Projects/Boxes-->
<div class="box">


</div>



    </div>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <script src="" async defer></script>
    </body>
</html>

   CSS:


   body{
   margin:0px;
   padding:0;
   color:whitesmoke;
    }
     .center{
     display:block;
     margin-left:500px;
     margin:right:200px;
     width:25%;
     height:25%;
     border-radius: 30px;
      }
     ul{
     list-style-type: none;
     text-align:right;
     margin:0;
     margin-right:50px;
     padding:3px;
     }


     li{
     display:inline;
     margin:30px;  
     }


     li:hover{
     color:orangered;

     }

     h1,h2,h3 {
     text-align:center;
      } 
     .container{
     /*background: url();
     /*background-repeat:no-repeat;
     background-size:cover;
     /*Background*/

     /*body*/
     background: #3399ff;
     }


     .circle{
      position: absolute;
      border-radius: 50%;
      background: white;
      animation: ripple 15s infinite;
      box-shadow: 0px 0px 1px 0px #508fb9;
      }

      .small{
       width: 200px;
       height: 200px;
       left: -100px;
       bottom: -100px;
       }

      .medium{
       width: 400px;
       height: 400px;
       left: -200px;
       bottom: -200px;
        }

       .large{
        width: 600px;
        height: 600px;
        left: -300px;
        bottom: -300px;
        }

      .xlarge{
       width: 800px;
       height: 800px;
       left: -400px;
       bottom: -400px;
       }

      .xxlarge{
       width: 1000px;
       height: 1000px;
       left: -500px;
       bottom: -500px;
        }

      .shade1{
      opacity: 0.2;
        }
      .shade2{
      opacity: 0.5;
        }

      .shade3{
      opacity: 0.7;
        }

      .shade4{
      opacity: 0.8;
        }

      .shade5{
      opacity: 0.9;
        }

       @keyframes ripple{
        0%{
       transform: scale(0.8);
          }

       50%{
        transform: scale(1.2);
         }

       100%{
       transform: scale(0.8);
        }
        }
       /*End Background*/
        } 


        }
       .about{

        }
      p{
      text-align:left;
       }

为什么我的动画不能在“容器” div中运行？

0 个答案: