css旋转

浏览311
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css旋转</title>
    <style>
.gif_pic{
     text-align: center ;  
 }
 @-webkit-keyframes rotation{
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes rotation_to{
    from { -webkit-transform: rotate(360deg);}
    to { -webkit-transform: rotate(0deg); }
} 
.add_pic{
    -webkit- transform: rotate (360deg);
    animation: rotation 1s linear infinite;
    - moz -animation: rotation 1s linear infinite;
    -webkit - animation: rotation 1s linear infinite ;
    -o-animation: rotation 1s linear infinite;
position:absolute;
top:13px;
left:4px
}  
.add_pic_a{
    -webkit- transform: rotate (360deg);
    animation: rotation_to 1s linear infinite;
    - moz -animation: rotation_to 1s linear infinite;
    -webkit - animation: rotation_to 1s linear infinite ;
    -o-animation: rotation_to 1s linear infinite;
position:absolute;
top:0;
left:0
}  
</style>
</head>
<body>
    
<div>
    <img class="add_pic img" src="./1.png" /> 
     <img class="add_pic_a img" src="./2.png" /> 
</div>
 

</body>
</html>

  • 暂无任何回答