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