要求 : 在任何分辨率下 點點圖是個動畫 一直在 圈圈圖 的中間旋轉
<div class="electricPhoto">
<div class="dotbox">
<img class="dotimg fly" src="static/images/dot.png">
</div>
</div>
//圈圈圖做背景圖片
.electricPhoto{
background: url('../images/searchbg.png') center no-repeat;
background-size: 100%;
width: 90%;
margin:0 auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
//點點動圖
.electricPhoto image{
width: 100%;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.dotbox{
width: 150px;
height: 130px;
overflow: hidden;
border-radius: 50%;
text-align: center;
}
//動畫
@keyframes fly-01 {
from{
transform:rotate(360deg);
}
to{
transform: rotate(720deg);
}
}