schema.json 表单
"donghua": {
"type": "OfficialSelect",
"dataName": "donghua",
"label": {
"description": {
"desc": ""
},
"title": "图片动效设置"
},
"wrapperStyle": {},
"style": {},
"invisible": false,
"extension": {
"placeholder": "无动效",
"dataSource": [
{
"label": "无动效",
"value": "adx1"
},
{
"label": "左右移动",
"value": "adx2"
}, {
"label": "上下移动",
"value": "adx3"
}, {
"label": "闪烁",
"value": "adx4"
}, {
"label": "Q弹晃动",
"value": "adx5"
}, {
"label": "橡皮筋",
"value": "adx6"
}, {
"label": "左右摇摆(3度)",
"value": "adx7"
}, {
"label": "左右摇摆(5度)",
"value": "adx8"
}, {
"label": "左右摇摆(10度)",
"value": "adx9"
}, {
"label": "左右摇摆(20度)",
"value": "adx10"
}, {
"label": "左右摇摆(30度)",
"value": "adx11"
}, {
"label": "旋转(顺时针)",
"value": "adx12"
}, {
"label": "旋转(逆时针)",
"value": "adx13"
}
],
"defaultValue": "adx2"
},
"validateProps": {
"dataType": "Default",
"required": false,
"validate": false
}
},index.css
.adx1{font-style: normal;}
.adx2{
/* 动画名称 动画时长 延时时间 匀速 无限循环 逆播 */
animation: changes2 1s 0s linear infinite normal;
}
.adx3{
animation: changes3 1s 0s linear infinite normal;
}
.adx4{
animation: changes4 1s 0s linear infinite normal;
}
.adx5{
animation: changes5 1s 0s linear infinite normal;
}
.adx6{
animation: changes6 1s 0s linear infinite normal;
}
.adx7{
animation: changes7 1s 0s linear infinite normal;
}
.adx8{
animation: changes8 1s 0s linear infinite normal;
}
.adx9{
animation: changes9 1s 0s linear infinite normal;
}
.adx10{
animation: changes10 1s 0s linear infinite normal;
}
.adx11{
animation: changes11 1s 0s linear infinite normal;
}
.adx12{
animation: changes12 1s 0s linear infinite normal;
}
.adx13{
animation: changes13 1s 0s linear infinite normal;
}
/*动画集名称*/
/* @keyframes changes {
from {
transform: rotate(15deg)
}
to {
transform: rotate(-10deg)
}
}
*/
/*动画集合 可以自定义动画在百分之几，比如你可以定义0%,10%,20%,30%,33%.....,如果只定义两个，也可以使用from,to来代替*/
/*左右移动*/
@keyframes changes2 {
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
25% {opacity:1;-webkit-transform:translate(3px,0px) scale(1,1) rotate(0deg);transform:translate(3px,0px) scale(1,1) rotate(0deg);}
50% {opacity:1;-webkit-transform:translate(0px,0px) scale(1,1) rotate(0deg);transform:translate(0px,0px) scale(1,1) rotate(0deg);}
75% {opacity:1;-webkit-transform:translate(-3px,0px) scale(1,1) rotate(0deg);transform:translate(-3px,0px) scale(1,1) rotate(0deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*上下移动*/
@keyframes changes3 {
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
25% {opacity:1;-webkit-transform:translate(0,3px) scale(1,1) rotate(0deg);transform:translate(0,3px) scale(1,1) rotate(0deg);}
50% {opacity:1;-webkit-transform:translate(0,0px) scale(1,1) rotate(0deg);transform:translate(0,0px) scale(1,1) rotate(0deg);}
75% {opacity:1;-webkit-transform:translate(0,-3px) scale(1,1) rotate(0deg);transform:translate(0,-3px) scale(1,1) rotate(0deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*闪烁*/
@keyframes changes4 {
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
50% {opacity:0;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*Q弹晃动*/
@keyframes changes5{
0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) }
}
/*橡皮筋*/
@keyframes changes6{
0% { -webkit-transform: scaleX(1); transform: scaleX(1) }
30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) }
40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) }
50% { -webkit-transform: scale3d(1.15,.75,1); transform: scale3d(1.15,.75,1) }
65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) }
75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) }
to { -webkit-transform: scaleX(1); transform: scaleX(1) }
}
/*左右摇摆3度*/
@keyframes changes7{
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(3deg);transform:translate(0,0) scale(1,1) rotate(3deg);}
50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-3deg);transform:translate(0,0) scale(1,1) rotate(-3deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*左右摇摆5度*/
@keyframes changes8{
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(5deg);transform:translate(0,0) scale(1,1) rotate(5deg);}
50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-5deg);transform:translate(0,0) scale(1,1) rotate(-5deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*左右摇摆10度*/
@keyframes changes9{
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(10deg);transform:translate(0,0) scale(1,1) rotate(10deg);}
50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-10deg);transform:translate(0,0) scale(1,1) rotate(-10deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*左右摇摆20度*/
@keyframes changes10{
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(20deg);transform:translate(0,0) scale(1,1) rotate(20deg);}
50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-20deg);transform:translate(0,0) scale(1,1) rotate(-20deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*左右摇摆30度*/
@keyframes changes11{
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
25% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(30deg);transform:translate(0,0) scale(1,1) rotate(30deg);}
50% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
75% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-30deg);transform:translate(0,0) scale(1,1) rotate(-30deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
}
/*旋转（顺时针）*/
@keyframes changes12{
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(360deg);transform:translate(0,0) scale(1,1) rotate(360deg);}
}
/*旋转（逆时针）*/
@keyframes changes13{
0% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(0deg);transform:translate(0,0) scale(1,1) rotate(0deg);}
100% {opacity:1;-webkit-transform:translate(0,0) scale(1,1) rotate(-360deg);transform:translate(0,0) scale(1,1) rotate(-360deg);}
}