动画效果

### 自动旋转效果 #

在"模板"的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);}

效果如下: