475
4
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
body{display:flex;justify-content:center;margin-top:300px;background-color:#212121;}.container{width:300px;height:280px;position:absolute;top:calc(50% - 140px);left:calc(50% - 150px);}.cofer{width:95%;height:15px;position:absolute;bottom:25px;left:calc(50% - 47.5%);background-color:#41bdad;border-radius:10px;}.cofh{width:100%;height:80px;position:absolute;top:0;left:0;background-color:#ddcfcc;border-radius:10px;}.cofhb{width:25px;height:25px;position:absolute;top:25px;background-color:#282323;border-radius:50%;}.cofhb::after{content:"";width:8px;height:8px;position:absolute;bottom:-8px;left:calc(50% - 4px);background-color:#615e5e;}.cofms-one{opacity:0;bottom:50px;left:102px;animation:smokeOne 3s 4s linear infinite;}.cofms-two{opacity:0;bottom:70px;left:118px;animation:smokeTwo 3s 5s linear infinite;}.cofms-three{opacity:0;bottom:65px;right:118px;animation:smokeTwo 3s 6s linear infinite;}.cofms-for{opacity:0;bottom:50px;right:102px;animation:smokeOne 3s 5s linear infinite;}.cofer::after{content:"";width:106%;height:26px;position:absolute;bottom:-25px;left:-8px;background-color:#000;}.cofbo{left:15px;}.cofbt{left:50px;}.cofd{width:50px;height:50px;position:absolute;top:calc(50% - 25px);left:calc(50% - 25px);border-radius:50%;background-color:#9acfc5;border:5px solid #43beae;box-sizing:border-box;}.cofds{width:8px;height:20px;position:absolute;top:10px;right:10px;background-color:#9b9091;box-shadow:-12px 0 0 #9b9091,-24px 0 0 #9b9091;}.cofmd{width:90%;height:160px;position:absolute;top:80px;left:calc(50% - 45%);background-color:#bcb0af;}.cofmd:before{content:"";width:90%;height:100px;background-color:#776f6e;position:absolute;bottom:0;left:calc(50% - 45%);border-radius:20px 20px 0 0;}.cofme{width:60px;height:20px;position:absolute;top:0;left:calc(50% - 30px);background-color:#231f20;}.cofml{width:6px;height:63px;opacity:0;position:absolute;top:50px;left:calc(50% - 3px);background-color:#74372b;animation:liquid 4s 4s linear infinite;}.cofms{width:8px;height:20px;position:absolute;border-radius:5px;background-color:#b3aeae;}.cofme::before{content:"";width:50px;height:20px;border-radius:0 0 50% 50%;position:absolute;bottom:-20px;left:calc(50% - 25px);background-color:#231f20;}.cofme::after{content:"";width:10px;height:10px;position:absolute;bottom:-30px;left:calc(50% - 5px);background-color:#231f20;}.cofma{width:70px;height:20px;position:absolute;top:15px;right:25px;background-color:#231f20;}.cofma::before{content:"";width:15px;height:5px;position:absolute;top:7px;left:-15px;background-color:#9e9495;}.cofmc{width:80px;height:47px;position:absolute;bottom:0;left:calc(50% - 40px);background-color:#FFF;border-radius:0 0 70px 70px / 0 0 110px 110px;}.cofmc::after{content:"";width:20px;height:20px;position:absolute;top:6px;right:-13px;border:5px solid #FFF;border-radius:50%;}@keyframes liquid{0%{height:0px;opacity:1;}5%{height:0px;opacity:1;}20%{height:62px;opacity:1;}95%{height:62px;opacity:1;}100%{height:62px;opacity:0;}}@keyframes smokeOne{0%{bottom:20px;opacity:0;}40%{bottom:50px;opacity:.5;}80%{bottom:80px;opacity:.3;}100%{bottom:80px;opacity:0;}}@keyframes smokeTwo{0%{bottom:40px;opacity:0;}40%{bottom:70px;opacity:.5;}80%{bottom:80px;opacity:.3;}100%{bottom:80px;opacity:0;}}
</style>
<body>
<div class="loader">
<div class="container">
<div class="cofh">
<div class="cofhb cofbo"></div>
<div class="cofhb cofbt"></div>
<div class="cofd"></div>
<div class="cofds"></div>
</div>
<div class="cofmd">
<div class="cofme"></div>
<div class="cofma"></div>
<div class="cofml"></div>
<div class="cofms cofms-one"></div>
<div class="cofms cofms-two"></div>
<div class="cofms cofms-three"></div>
<div class="cofms cofms-for"></div>
<div class="cofmc"></div>
</div>
<div class="cofer"></div>
</div>
</div>
</body>
<script>
</script>
</html>
【特效来源：源码驿栈】
这家伙太懒了，什么也没留下。
