1、效果图
2、实现代码
<template><div class="box"><div class="line"></div><div class="lineNew"></div></div>
</template><script lang="ts" setup></script><style lang="scss" scoped>
.searchBox {display: flex;margin-bottom: 2vh;.logo {flex: 0.8;display: inline-block;background-color: #409efc;height: 10vh;}.input-with-select {flex: 1;margin: 2vh 14vh 2vh 5vh;}
}
.slideshow {height: 15vh;border-radius: 16px;
}
img {width: 100%;height: 100%;object-fit: cover;
}
.recommend {margin-top: 3vh;.refer {float: left;font-size: 20px;}.city {margin-top: 1vh;float: right;span {margin-right: 5vh;}}.el-dropdown-link:focus {outline: none;}
}
.box {width: 200px;height: 200px;font-size: 10px;position: relative;display: flex;align-items: center;justify-content: center;
}
.box .line {position: absolute;width: 100%;height: 100%;border-radius: 50%;border-style: solid;border-color: #00bfff transparent transparent #00bfff;border-width: 2px 2px 0 0;animation: animate 3s linear infinite normal;
}
.box .lineNew {position: absolute;width: 100%;height: 100%;border-radius: 50%;border-style: solid;border-color: transparent #00ff11 #00ff11 transparent;border-width: 0 0 2px 2px;animation: animate 3s linear infinite normal;
}
@keyframes animate {to {transform: rotate(1turn);}
}
</style>
)