//需要的背景图片
//需要的图片--外环
//需要的图片-地球网
//需要的图片 --地球
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画效果</title>
</head>
<body>
// 所有的背景图片 需要准备
<div class="map">
<div class="chart"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
</body>
<script>
</script>
<style>
body {
background: url(./image/bg.jpg) no-repeat;
}
.map {
position: relative;
height: 500px;
width: 500px;
margin: 200px auto;
}
.map .chart {
position: absolute;
top: 0;
left: 0;
z-index: 5;
height: 500px;
width: 100%;
}
.map .map1,
.map .map2,
.map .map3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background: url(./image/map.png) no-repeat;
background-size: 100%, 100%;
opacity: 0.3;
}
.map .map2 {
width: 500px;
height: 500px;
background-image: url(./image/lbx.png);
opacity: 0.6;
animation: rotate 15s linear infinite;
z-index: 2;
}
.map .map3 {
width: 500px;
height: 500px;
background-image: url(./image/jt.png);
animation: rotate1 10s linear infinite;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
</style>
</html>
