<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3实现各种操作提示框(警告,成功,失败,等待中)</title>
</head>
<style>
*{
padding:0;
margin:0 auto;
}
body {
font: 14px/1.6 Arial;
color: #222222;
}
.ex-popoup-hint {
position: fixed;
top: 25%;
left: 45%;
z-index: 99;
width: 170px;
min-height: 48px;
padding: 138px 15px 14px;
text-align: center;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.exph-war {
display:none;
background-color: rgba(248,149,0,.95);
}
.ex-popoup-hint s {
position: absolute;
top: 42px;
left: 50%;
height: 80px;
overflow: hidden;
background-image: url(ext_hint_icon.png);
background-repeat: no-repeat;
}
.exph-war s {
width: 16px;
margin-left: -8px;
background-position: -100px 0;
-webkit-animation: war 1.2s ease .3s;
-webkit-animation-fill-mode: both;
}
.ex-popoup-hint span {
display: inline-block;
line-height: 24px;
vertical-align: middle;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
font-size: 18px;
color: #ffffff;
}
.ex-popoup-hint::after {
content: "";
display: inline-block;
height: 48px;
vertical-align: middle;
}
@-webkit-keyframes war {
0%,
33.33%,
66.66%,
100% {
opacity:1
}
16.66%,
50% {
opacity:0
}
}
.exph-suc {
display:none;
background-color: rgba(47,183,70,.95);
}
.exph-suc s {
width: 100px;
margin-left: -50px;
background-position: 0 0;
-webkit-animation: suc .5s ease;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes suc {
0% {
width:0
}
100% {
width:100px
}
}
.exph-err {
display:none;
background-color: rgba(181,12,3,.95);
}
.exph-err s {
width: 80px;
margin-left: -40px;
background-position: -116px 0;
-webkit-animation: err 1.2s ease .3s;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes err {
0% {
-webkit-transform:scale(1)
}
15% {
-webkit-transform:scale(0.8)
}
30% {
-webkit-transform:scale(1.2)
}
45% {
-webkit-transform:scale(1)
}
}
.exph-loader {
display:none;
-webkit-filter: none;
filter: none;
background-color: rgba(102,102,102,.95);
}
.exph-loader::before {
content: "";
position: absolute;
top: 42px;
left: 50%;
width: 80px;
height: 80px;
margin-left: -40px;
background-image: url(ext_hint_loader.png);
-webkit-animation: loader 1.5s steps(24) infinite;
animation: loader 1.5s steps(24) infinite;
}
@-webkit-keyframes loader {
100% {
-webkit-transform:rotate(360deg)
}
}
.fb{
position: fixed;
bottom:10%;
left:45%;
}
</style>
<body>
<div class="ex-popoup-hint exph-war" id="war">
<s></s>
<span rel="con">安全升级,请先重置安全密钥,再进行操作</span>
</div>
<div class="ex-popoup-hint exph-suc" id="suc">
<s></s>
<span rel="con">安全密钥修改成功</span>
</div>
<div class="ex-popoup-hint exph-err" id="err">
<s></s>
<span rel="con">操作失败</span>
</div>
<div class="ex-popoup-hint exph-loader" id="loader">
<span>处理中</span>
</div>
<div class="fb">
<button type="button" onclick="showEx('war')">警告</button>
<button type="button" onclick="showEx('suc')">成功</button>
<button type="button" onclick="showEx('err')">失败</button>
<button type="button" onclick="showEx('loader')">等待</button>
</div>
</body>
</html>
<script>
function showEx(id){
var obj = document.getElementById(id);
obj.style.display = "block";
setTimeout(function(){
obj.style.display = "none";
},2000);
}
</script>
CSS3实现各种操作提示框(警告,成功,失败,等待中)
最新推荐文章于 2024-06-11 06:01:33 发布