1 Star 0 Fork 4

miaoguoqiang/炫酷弹窗插件 hsycmsAlert.js

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
hsycmsAlert.css 4.96 KB
一键复制 编辑 原始数据 按行查看 历史
神夜 提交于 2021-06-07 23:59 . no commit message
/*
* hsycmsAlert 弹窗插件
* author @ http://www.hsycms.com
*/
*{ margin:0px; padding:0px; box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
*:focus{ outline:none;}
ul,li{ list-style-type: none;}
.hsycms-model-mask{ width:100%; height:100%; display: none; position: fixed; left:0; top:0; background:rgba(0,0,0,0.7); z-index:2222;}
.hsycms-model{ position: fixed; z-index:3333; display: none; left:0; right:0; margin:auto; top:50%; transform-origin: center; max-width:80%; max-height:80%; background:#fff; border-radius:5px; overflow: hidden;}
.hsycms-model.hsycms-model-alert,.hsycms-model.hsycms-model-confirm{ width:280px;}
.hsycms-model.hsycms-model-model{ width:400px;}
.hsycms-model.hsycms-model-success,.hsycms-model.hsycms-model-error{ padding:20px 12px; width:140px; }
.hsycms-model.hsycms-model-tips{ padding:8px 12px; max-width:150px; background:rgba(0,0,0,0.6); }
.hsycms-model.hsycms-model-tips .hsycms-model-text{ padding:0; color:#fff; }
.hsycms-model.hsycms-model-loading{ padding:20px 12px; width:100px; background:rgba(0,0,0,0.6); }
.hsycms-model.hsycms-model-loading .hsycms-model-text{ padding:0; color:#fff; }
.hsycms-model .hsycms-model-load{ display: flex; align-items: center; padding-top:10px; margin-bottom:15px; justify-content:center;}
.hsycms-model .hsycms-model-load span{ width:6px; animation: hsycms-alert-load 1s ease infinite; transform: translateY(10px); animation-delay:0.1s; margin:0 5px; height:6px; opacity:0; border-radius:6px; background:#fff;}
.hsycms-model .hsycms-model-load span:nth-child(2){ animation-delay:0.2s;}
.hsycms-model .hsycms-model-load span:nth-child(3){ animation-delay:0.3s;}
.hsycms-model .hscysm-model-title{ padding:15px 0; opacity:0; color:#333; transform: translateY(10px); animation: hsycms-alert-text 0.3s ease forwards; animation-delay:0.2s; font-weight:bold; font-size: 15px; text-align: center;}
.hsycms-model .hsycms-model-text{ font-size:14px; text-align: center; color:#333; line-height:23px; padding:0 20px; opacity:0; transform: translateY(10px); animation: hsycms-alert-text 0.3s ease forwards; animation-delay:0.4s;}
.hsycms-model .hsycms-model-text.l{ text-align: left;}
.hsycms-model .hsycms-model-icon{ padding-bottom:12px;}
.hsycms-model .hsycms-model-icon svg{ margin:0 auto; display: block;}
.hsycms-model.hsycms-model-success .hsycms-model-text,.hsycms-model.hsycms-model-error .hsycms-model-text{ color:#14d6a2; padding:0; opacity:0; transform: translateY(10px); animation: hsycms-alert-text 0.3s ease forwards; animation-delay:0.9s; }
.hsycms-model.hsycms-model-error .hsycms-model-text{ color:#f54655}
.hsycms-model .hsycms-model-content{ padding-top:0; overflow: hidden auto; max-height:80%; font-size:14px;}
.hsycms-model .hsycms-model-btn{ display:flex; align-items: center; border-top:1px solid #f1f1f1; justify-content: center; margin-top:20px; opacity:0; animation: hsycms-alert-button 0.6s ease forwards; animation-delay:0.6s;}
.hsycms-model .hsycms-model-btn button{ flex:1; color:#999; cursor: pointer; border:0; background:none; padding:12px;}
.hsycms-model .hsycms-model-btn button:last-child{ color:#fe5c42}
.hsycms-model .hsycms-model-btn button.cancel{ border-right:1px solid #f1f1f1;}
.hsycms-model .hsycms-model-btn button:active{ opacity:0.8;}
.hsycms-ani-open{ animation: hsycms-open 0.3s ease forwards; }
.hsycms-ani-close{ animation: hsycms-close 0.3s ease forwards; }
@-webkit-keyframes hsycms-open{
0%{ transform: scale(0); opacity:0; }
100%{ transform: scale(1); opacity:1; }
}
@-webkit-keyframes hsycms-close{
0%{ transform: scale(1); opacity:1; }
30%{ transform: scale(1.05); opacity: 0.5; }
100%{ transform: scale(0.7); opacity: 0;}
}
.hsycms-alert-svgcircle{
stroke-dasharray:200;
stroke-dashoffset:200;
animation: hsycms-alert-ruand 0.5s ease-in-out forwards
}
.hsycms-alert-svggou {
stroke-dasharray:80;
stroke-dashoffset:80;
animation: hsycms-alert-tick .6s ease-out forwards;
animation-delay: .75s;
}
.hsycms-alert-svgca1 {
stroke-dasharray:80;
stroke-dashoffset:80;
animation: hsycms-alert-tick .6s ease-out forwards;
animation-delay: .75s;
}
.hsycms-alert-svgca2 {
stroke-dasharray:80;
stroke-dashoffset:80;
animation: hsycms-alert-tick .6s ease-out forwards;
animation-delay: .85s;
}
@keyframes hsycms-alert-ruand {
form{
stroke-dashoffset:200;
}
to{
stroke-dashoffset:400;
}
}
@keyframes hsycms-alert-tick {
from {
stroke-dashoffset:80;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes hsycms-alert-text {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes hsycms-alert-button {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes hsycms-alert-load {
0% {
transform: translateY(0px);
opacity: 0;
}
50% {
transform: translateY(-10px);
opacity: 1;
}
100%{
transform: translateY(0px);
opacity: 0;
}
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/smartelec_056/hsycmsAlert.git
[email protected]:smartelec_056/hsycmsAlert.git
smartelec_056
hsycmsAlert
炫酷弹窗插件 hsycmsAlert.js
master

搜索帮助