效果图如下:(可以根据需要换图片显示不同的样式)
父组件引用的方式如下:
!
子组件的实现如下:
子组件的css如下:
<style lang="scss">
.circular-part {
width: auto;
height: auto;
margin: 0;
position: relative;
cursor: pointer;
}
.circular-part img {
width: 100%;
animation: pieRotate 5s linear 0s infinite; // 图片自动旋转pieRotate在scss中实现
.circular-part-text {
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 22px;
}
.num {
font-size: 46px;
font-weight: 700;
span {
font-size: 20px;
color:white;
}
}
.unit {
font-size: 22px;
}
</style>
在scss文件中写入动画效果
@keyframes pieRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}