纯css实现的放大图标(2)

html

css

.magnify. icon  {

   color :  #000 ;

   position :  absolute ;

   margin-top :  2px ;

   margin-left :  3px ;

   width :  12px ;

   height :  12px ;

   border :  solid  1px  currentColor;

   border-radius:  100% ;

   -webkit-transform: rotate( -45 deg);

           transform: rotate( -45 deg);

}

 

.magnify.icon:before {

   content :  '' ;

   position :  absolute ;

   top :  12px ;

   left :  5px ;

   height :  6px ;

   width :  1px ;

   background-color : currentColor;

}

 

.magnify. icon  i {

   position :  absolute ;

   left :  4px ;

   top :  4px ;

   -webkit-transform: rotate( 45 deg);

           transform: rotate( 45 deg);

}

 

.magnify. icon  i:before {

   content :  '' ;

   position :  absolute ;

   width :  6px ;

   height :  1px ;

   background-color : currentColor;

}

 

.magnify. icon  i:after {

   content :  '' ;

   position :  absolute ;

   width :  6px ;

   height :  1px ;

   background-color : currentColor;

   -webkit-transform: rotate( 90 deg);

           transform: rotate( 90 deg);

}