体验在http://ts.calicastle.com,点击右上角消息提醒,错误与成功提示框,转发等弹出框, 登录框与图标放大等的动画特效补丁
gif预览:
补丁覆盖目录:
/addons/theme/stv1/_static/js/
之后必须在/addons/theme/stv1/_static/css/global.css 内加入以下css语句或者在我的帖子中的 custom.css 中加入:
.show_box {
animation: showImageBox 0.5s cubic-bezier(.43, -0.07, .43, 1.33) 1 alternate;
-webkit-animation: showImageBox 0.5s cubic-bezier(.43, -0.07, .43, 1.33) 1 alternate;
}
.close_box {
animation: hideImageBox 0.5s ease-in-out backwards;
-webkit-animation: hideImageBox 0.5s ease-in-out backwards;
}
@keyframes showImageBox {
from {
opacity: 0;
transform: scale(0.4);
-webkit-transform: scale(0.4);
}
to {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-webkit-keyframes showImageBox {
from {
opacity: 0;
transform: scale(0.4);
-webkit-transform: scale(0.4);
}
to {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
}
}
@keyframes hideImageBox {
from {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.4);
-webkit-transform: scale(0.4);
}
}
@-webkit-keyframes hideImageBox {
from {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
必须 js 配合 css 一起使用
- 弹出特效补丁.zip (10.7 KB)