編碼的世界 / 優質文選 / 生涯

CSS3 animation 讓彈框從上彈出，然後有個抖動的效果

2022年7月02日
-   

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
/* 彈框樣式 */
.bom_bg{width: 100%;height:100%; background:rgba(0, 0, 0,0.85); position: fixed; top:0; left:0;}
.bom_bg .bom_one{width:320px; padding:0 15px; height:218px; background:#fff; border-radius:10px; position: absolute; top:0%; left:50%; transform:translate(-50%,-50%); animation: bomaction 0.3s linear forwards;}
.bom_bg .bom_one .bom_top_bor{width: 100%; height: 48px;  font-size: 22px;  color: #ff4b49;  line-height: 48px;  border-bottom: 2px solid #c15a47; text-align: center;}
.bom_center{height: 113px; line-height: 123px; text-align: center; font-size: 18px;}
.bom_bottom{height: 55px; text-align: center; color: #202020; font-size: 16px;}
.bom_bottom span{height: 38px;  width: 125px;  background: #ff4b49; cursor: pointer;  display: inline-block;  border-radius: 20px; line-height: 40px;  color: #fff;}
/* 彈框動畫效果 */
@keyframes  bomaction{
    0%{
        top:0%;
    }
    46%{
        top:52%;
    }
    48%{
        top:48%;
    }
    50%{
        top:52%;
    }
    52%{
        top:48%;
    }
    54%{
        top:52%;
    }
    56%{
        top:48%;
    }
    57%{
        top:50%;
    }
    100%{
        top:50%;
    }
}
</style>
<body>
   <div class="bom_bg">
        <div class="bom_one">
            <div class="bom_top_bor">溫馨提示</div>
            <div class="bom_center">哈哈哈哈哈</div>
            <div class="bom_bottom"><span>知道了</span></div>
        </div>
   </div> 
</body>
</html>

熱門文章