效果图
<template>
<div class="earth-page">
<div class="sun-box">
<div class="sun-qiu">
<div class="yue sun-qiu">
<div class="xiao">
<img :src="yue" />
</div>
<img :src="earth" />
</div>
<div class="juzhong sun-box">
<img :src="sun" />
</div>
</div>
</div>
</div>
</template>
<script>
import sun from "@/assets/images/sun.jpg";
import earth from "@/assets/images/earth.jpg";
import yue from "@/assets/images/yue.jpg";
export default {
data() {
return {
sun: sun,
earth: earth,
yue: yue,
};
},
};
</script>
<style scoped>
.earth-page {
position: relative;
width: 100%;
height: 100%;
}
img {
width: 100%;
}
.sun-box {
position: absolute;
margin: auto;
height: 350px;
width: 350px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.sun-qiu {
position: relative;
width: 100%;
height: 100%;
/* 动画的名字 */
animation-name: test;
/* 动画完成的时间 */
animation-duration: 5s;
/* 全程速度 linear相同的 */
animation-timing-function: linear;
/* 多少秒后开始启动 */
animation-delay: 0s;
/* 循环次数 infinite无限 */
animation-iteration-count: infinite;
/* 是否反向轮播动画 */
animation-direction: normal;
}
.yue {
position: absolute;
right: 0;
top: 0;
height: 70px;
width: 70px;
animation-duration: 2s;
z-index: 2;
}
.xiao {
position: absolute;
top: -16px;
right: -12px;
height: 20px;
width: 20px;
}
@keyframes test {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.juzhong {
height: 65%;
width: 65%;
}
</style>
@/assets/images下面的图片