*{ margin:0; padding:0; } body{ font-family: "微软雅黑" } .alert-modal{ left:0; top:0; width:100%; height:100%; background: #000; opacity: 0.6; filter: alpha(opacity=60); } .alert-container{ display: inline-block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; background: #F6F6F6; border:1px solid #f1f1f1; z-index: 99999; box-sizing: border-box; overflow: hidden; } .alert-title{ font-size: 24px; text-align: center; line-height: 42px; color: #111; background: #F6F6F6; position: absolute; left: 0; top: 10px; z-index: 999; width: 100%; text-align: center; } .alert-bg{ background: url("/jxjcsglxhcom/creditchina-cms.bj.bcebos.com/pc/img/alert.png") no-repeat; background-size: 100%; height: 80px; width: 80px; margin-top: 60px; margin-left: 150px; } .alert-content{ font-size: 16px; padding:15px 20px; color:#555; box-sizing: border-box; /*height:100%;*/ overflow: auto; } .alert-content-scrollbar{ } .alert-btn-box{ border-top:1px solid #f1f1f1; text-align: right; position: absolute; left:0; background: #F6F6F6; bottom: 0; z-index: 999; width:100%; } .alert-btn-p{ display: inline-block; text-align: center; border-right:1px solid #f1f1f1; font-size:14px; line-height: 35px; cursor: pointer; color:#fff; box-sizing: border-box; width: 140px; height: 30px; background: #ea3e3e; } .alert-btn-p:last-child{ border-right: none; } .pcAlert .alert-btn-box{ padding-right:10px; border:none; } .pcAlert .alert-btn-p{ border:1px solid #f1f1f1; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; line-height: 30px; /*margin:45px 0;*/ margin-bottom: 30px; padding:0 10px; margin-right:115px; } .alert-btn-close{ position: absolute; right:10px; top:0px; font-size: 35px; cursor: pointer; z-index: 1000; color: #ea3e3e; } .alert-container-black{ background-color:rgba(0,0,0,0.65); border:none; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); } .alert-container-black .alert-content{ color: #F6F6F6; } .linearTop{ -webkit-animation-name: linearTop; -moz-animation-name: linearTop; -o-animation-name: linearTop; animation-name: linearTop; } .linearBottom{ -webkit-animation-name: linearBottom; -moz-animation-name: linearBottom; -o-animation-name: linearBottom; animation-name: linearBottom; } @keyframes linearBottom { 0%{ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; filter:alpha(opacity=100); } 100%{ -webkit-transform: translate3d(0,80px,0); -moz-transform: translate3d(0,80px,0); -o-transform: translate3d(0,80px,0); transform: translate3d(0,80px,0); opacity: 0; filter:alpha(opacity=0); } } @keyframes linearTop { 0%{ -webkit-transform: translate3d(0,80px,0); -moz-transform: translate3d(0,80px,0); -o-transform: translate3d(0,80px,0); transform: translate3d(0,80px,0); opacity: 0; filter:alpha(opacity=0); } 100%{ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; filter:alpha(opacity=100); } } /*显示动画*/ .animated.infinite { animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; } .animated.linearBottom, .animated.linearTop, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .45s; -moz-animation-duration: .45s; -o-animation-duration: .45s; animation-duration: .45s; } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; filter:alpha(opacity=0); -webkit-transform: scale3d(.3, .3, .3); -moz-transform: scale3d(.3, .3, .3); -o-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @keyframes bounceOut { 20% { -webkit-transform: scale3d(1.2, 1.2, 1.2); -moz-transform: scale3d(1.2, 1.2, 1.2); -o-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); } 65%, 70% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale3d(.75, .75, .75); -moz-transform: scale3d(.75, .75, .75); -o-transform: scale3d(.75, .75, .75); transform: scale3d(.75, .75, .75); } 100% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale3d(.3, .3, .3); -moz-transform: scale3d(.3, .3, .3); -o-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; }