伪类after和before的妙用

<! DOCTYPE html>
< html>
     < head >
           < meta charset= "utf-8" />
           < title ></title >
           < style >
                 /*小猴子*/
                 .box {
                      width : 200 px;
                      height : 100 px;
                      border-style : solid ;
                      border-width : 3 px 3 px 100 px 3 px;
                      border-radius : 100 %;
                      position : relative ;
                      -webkit-transform : rotateZ ( 180deg ) ;
                 }
                 .box p {
                      position : absolute ;
                      width : 60 px;
                      height : 0 px;
                      border-radius : 50 %;
                      border :3 px solid red;
                      top : 18 px;
                 left : 63 px;
                 animation : gouzi 0.3 s linear infinite ;
                 }
                 @keyframes gouzi{
                     from { height: 0; }
                     to { height: 1px ; }
                 }
 
                 .box :after {
                      content : '' ;
                      display : block ;
                      width : 30 px;
                      height : 30 px;
                      border-color : #fff ;
                      border-width : 35 px;
                      border-style : solid ;
                      background-color : #000 ;
                      border-radius : 100 %;
                      position : absolute ;
                      top :50 % ;
                 }
                 .box :before {
                      content : '' ;
                      display : block ;
                      width : 30 px;
                      height : 30 px;
                      border-color : #fff ;
                      border-width : 35 px;
                      border-style : solid ;
                      background-color : #000 ;
                      border-radius : 100 %;
                      position : absolute ;
                      top :50 % ;
                      left :50 % ;
                 }
 
                 /*八卦图*/
                 .baguatu {
                      width : 200 px;
                      height : 100 px;
                      border-style : solid ;
                      border-width :3 px 3 px 100 px 3 px ;
                      border-radius : 100 %;
                      position :relative ;
                      animation : baguatu 4 s linear infinite ;
                 }
                 .baguatu :after {
                      content :'' ;
                      display : block ;
                      width : 30 px;
                      height : 30 px;
                      background-color : #000 ;
                      border-color : #fff ;
                      border-style : solid ;
                      border-width : 35 px;
                      position : absolute ;
                      top :50 % ;
                      border-radius : 100 %;
                 }
                 .baguatu :before {
                      content :'' ;
                      display : block ;
                      width : 30 px;
                      height : 30 px;
                      background-color : #fff ;
                      border-color : #000 ;
                      border-style : solid ;
                      border-width : 35 px;
                      position : absolute ;
                      top :50 % ;
                      left :50 % ;
                      border-radius : 100 %;
                 }
                 @keyframes baguatu{
                      from {transform : rotateX( 0 ); }
                     to{transform: rotateX(360deg);}
                }
                @-webkit-keyframes baguatu{
                     from{-webkit-transform: rotateX(0);}
                     to{-webkit-transform: rotateX(360deg);}
                }
           </style>
     </head>
     <body>
           <!-- 小猴子  -->
           <div class="box"><p></p></div>
           </br>
           <!-- 八卦图 -->
           <div class="baguatu"></div>
 
     </body>
</html>

 

 

posted @ 2020-10-10 16:44  三只小熊sky  阅读(128)  评论(0)    收藏  举报