CSS3实现各种操作提示框(警告，成功，失败，等待中)

最新推荐文章于 2024-06-11 06:01:33 发布

buyue__

最新推荐文章于 2024-06-11 06:01:33 发布

阅读量1.5k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/buyueliuying/article/details/119416695

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>

图片ext_hint_icon.png

图片ext_hint_loader.png

buyue__

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现各种操作提示框(警告，成功，失败，等待中)

<!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>CSS
复制链接

扫一扫

专栏目录