css旋转代码

季夏梧桐

已于 2023-11-20 15:45:43 修改

阅读量150

点赞数

文章标签： css 前端

于 2023-11-20 15:45:22 首次发布

本文链接：https://blog.csdn.net/yu502586512/article/details/134510875

版权

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