h2 { color:#575757; font-size:30px; text-align:center; font-weight:600; text-transform:none; position:relative; margin:25px 0; padding:0; line-height:40px; display:block; } .status-icon { width:80px; height:80px; border:4px solid gray; -webkit-border-radius:40px; border-radius:50%; margin:20px auto; padding:0; position:relative; box-sizing:content-box; } .status-icon.sa-error { border-color:#F27474; } .status-icon.sa-error .sa-x-mark { position:relative; display:block; } .status-icon.sa-error .sa-line { position:absolute; height:5px; width:47px; background-color:#F27474; display:block; top:37px; border-radius:2px; } .status-icon.sa-error .sa-line.sa-left { -webkit-transform:rotate(45deg); transform:rotate(45deg); left:17px; } .status-icon.sa-error .sa-line.sa-right { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); right:16px; } .status-icon.sa-error.animateErrorIcon { -webkit-animation:animateErrorIcon 0.5s; animation:animateErrorIcon 0.5s; } .status-icon.sa-warning { border-color:#F8BB86; } .status-icon.sa-warning .sa-body { position:absolute; width:5px; height:47px; left:50%; top:10px; -webkit-border-radius:2px; border-radius:2px; margin-left:-2px; background-color:#F8BB86; } .status-icon.sa-warning .sa-dot { position:absolute; width:7px; height:7px; -webkit-border-radius:50%; border-radius:50%; margin-left:-3px; left:50%; bottom:10px; background-color:#F8BB86; } .status-icon.sa-warning.pulseWarning { -webkit-animation:pulseWarning 0.75s infinite alternate; animation:pulseWarning 0.75s infinite alternate; } .status-icon.sa-warning .pulseWarningIns { -webkit-animation:pulseWarningIns 0.75s infinite alternate; animation:pulseWarningIns 0.75s infinite alternate; } .status-icon.sa-info { border-color:#C9DAE1; } .status-icon.sa-info::before { content:""; position:absolute; width:5px; height:29px; left:50%; bottom:17px; border-radius:2px; margin-left:-2px; background-color:#C9DAE1; } .status-icon.sa-info::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; margin-left:-3px; top:19px; background-color:#C9DAE1; left:50%; } .status-icon.sa-success { border-color:#A5DC86; } .status-icon.sa-success::before,.status-icon.sa-success::after { content:''; -webkit-border-radius:40px; border-radius:50%; position:absolute; width:60px; height:120px; background:white; -webkit-transform:rotate(45deg); transform:rotate(45deg); } .status-icon.sa-success::before { -webkit-border-radius:120px 0 0 120px; border-radius:120px 0 0 120px; top:-7px; left:-33px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:60px 60px; transform-origin:60px 60px; } .status-icon.sa-success::after { -webkit-border-radius:0 120px 120px 0; border-radius:0 120px 120px 0; top:-11px; left:30px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transform-origin:0px 60px; transform-origin:0px 60px; } .status-icon.sa-success.animate::after { -webkit-animation:rotatePlaceholder 4.25s ease-in; animation:rotatePlaceholder 4.25s ease-in; } .status-icon.sa-success .sa-placeholder { width:80px; height:80px; border:4px solid rgba(165,220,134,0.2); -webkit-border-radius:40px; border-radius:50%; box-sizing:content-box; position:absolute; left:-4px; top:-4px; z-index:2; } .status-icon.sa-success .sa-line { height:5px; background-color:#A5DC86; display:block; border-radius:2px; position:absolute; z-index:2; } .status-icon.sa-success .sa-line.sa-tip { width:25px; left:14px; top:46px; -webkit-transform:rotate(45deg); transform:rotate(45deg); } .status-icon.sa-success .sa-line.sa-long { width:47px; right:8px; top:38px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } .status-icon.sa-success .sa-line.animateSuccessTip { -webkit-animation:animateSuccessTip 0.75s; animation:animateSuccessTip 0.75s; } .status-icon.sa-success .sa-line.animateSuccessLong { -webkit-animation:animateSuccessLong 0.75s; animation:animateSuccessLong 0.75s; } @-webkit-keyframes rotatePlaceholder { 0% { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } 5% { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } 12% { transform:rotate(-405deg); -webkit-transform:rotate(-405deg); } 100% { transform:rotate(-405deg); -webkit-transform:rotate(-405deg); } }@keyframes rotatePlaceholder { 0% { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } 5% { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } 12% { transform:rotate(-405deg); -webkit-transform:rotate(-405deg); } 100% { transform:rotate(-405deg); -webkit-transform:rotate(-405deg); } }.status-icon.sa-success .sa-fix { width:5px; height:90px; background-color:white; position:absolute; left:28px; top:8px; z-index:1; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } @-webkit-keyframes animateSuccessTip { 0% { width:0; left:1px; top:19px; } 54% { width:0; left:1px; top:19px; } 70% { width:50px; left:-8px; top:37px; } 84% { width:17px; left:21px; top:48px; } 100% { width:25px; left:14px; top:45px; } }@keyframes animateSuccessTip { 0% { width:0; left:1px; top:19px; } 54% { width:0; left:1px; top:19px; } 70% { width:50px; left:-8px; top:37px; } 84% { width:17px; left:21px; top:48px; } 100% { width:25px; left:14px; top:45px; } }@-webkit-keyframes animateSuccessLong { 0% { width:0; right:46px; top:54px; } 65% { width:0; right:46px; top:54px; } 84% { width:55px; right:0px; top:35px; } 100% { width:47px; right:8px; top:38px; } }@keyframes animateSuccessLong { 0% { width:0; right:46px; top:54px; } 65% { width:0; right:46px; top:54px; } 84% { width:55px; right:0px; top:35px; } 100% { width:47px; right:8px; top:38px; } }@-webkit-keyframes animateErrorIcon { 0% { transform:rotateX(100deg); -webkit-transform:rotateX(100deg); opacity:0; } 100% { transform:rotateX(0deg); -webkit-transform:rotateX(0deg); opacity:1; } }@keyframes animateErrorIcon { 0% { transform:rotateX(100deg); -webkit-transform:rotateX(100deg); opacity:0; } 100% { transform:rotateX(0deg); -webkit-transform:rotateX(0deg); opacity:1; } }@-webkit-keyframes pulseWarning { 0% { border-color:#F8D486; } 100% { border-color:#F8BB86; } }@keyframes pulseWarning { 0% { border-color:#F8D486; } 100% { border-color:#F8BB86; } }@-webkit-keyframes pulseWarningIns { 0% { background-color:#F8D486; } 100% { background-color:#F8BB86; } }@keyframes pulseWarningIns { 0% { background-color:#F8D486; } 100% { background-color:#F8BB86; } }/* Internet Explorer 9 has some special quirks that are fixed here */ /* The icons are not animated. */ /* This file is automatically merged into sweet-alert.min.js through Gulp */ /* Error icon */ .status-icon.sa-error .sa-line.sa-left { -ms-transform:rotate(45deg) \9; } .status-icon.sa-error .sa-line.sa-right { -ms-transform:rotate(-45deg) \9; } /* Success icon */ .status-icon.sa-success { border-color:transparent \9; } .status-icon.sa-success .sa-line.sa-tip { -ms-transform:rotate(45deg) \9; } .status-icon.sa-success .sa-line.sa-long { -ms-transform:rotate(-45deg) \9; }
这是从sweetalert拔下来的样式,想必很多人会用得到!