网页图片转动动画模板,可以用于上传动画效果,LOGO动态效果
效果图
代码如下:
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content ="width = device-width" />
<title>gxg</title>
</head>
<style lang="css">
.logo1 {
/* position: absolute; */
width: 100px;
height: 100px;
/* background-image: url(/static/shijian/upload1.png); */
background-size: 100px 100px;
z-index: 2;
}
.logo2 {
position: absolute;
left:0px;
width: 100px;
height: 100px;
/* background-image: url(/static/shijian/upload2.png); */
background-size: 100px 100px;
z-index: 3;
animation: haha1 2s linear infinite;
-webkit-animation: haha1 2s linear infinite;
-moz-animation: haha1 2s linear infinite;
-ms-animation: haha1 2s linear infinite;
-o-animation: haha1 2s linear infinite;
}
@keyframes haha1 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes haha1 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes haha1 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@-ms-keyframes haha1 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes haha1 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<body>
<div style="position: relative;">
<img src="https://s3.bmp.ovh/imgs/2021/09/6313b4c9d96b9eef.png" alt="上传" class="logo1">
<img src="https://s3.bmp.ovh/imgs/2021/09/9f9e9bd627e9179e.png" alt="上传" class="logo2">
</div>
</body>
</html>