自动旋转效果 #
在"模板"的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;}
效果如下:
