动画效果

自动旋转效果 #

在"模板"的style中加入以下样式

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.Rotate {
    -webkit-animation: spin 3s linear 3s 5 alternate;
    animation: spin 3s linear infinite;
}

如需任意组件自动旋转, 只需将Rotate这个类给到这个组件即可, 比如图形

<img class="Rotate" src="https://www.smartchart.cn/media/editor/smc162_20220407150432307320.png">

组件变形 #

常见变形沿着Y轴, 其它变形方式自已搜索, 比如需要0号,1号图形变形的样式写法

#container_0{transform:skewY(10deg);}
#container_1{transform:skewY(-10deg);}

变色效果 #

@keyframes changeColor {
0% {color: #f00;}
25% {color: #0f0;}
50% {color: #00f;}
75% {color: #ff0;}
100% {color: #f00;}
}
.Colorchange {animation: changeColor 3s infinite;}

效果如下: 输入图片说明