加林森 发表于 2021-11-1 23:52

本帖最后由 加林森 于 2022-3-7 22:46 编辑 <br /><br />马黑黑 发表于 2021-11-1 23:18
不是就好
我脾气很好的

<style type="text/css">

.mnBox {
        margin: auto;
        margin-top: 20px;
        position: relative;
        background: #333 url('https://pic.imgdb.cn/item/622600405baa1a80ab80cbb4.jpg') no-repeat center/cover;
        height: 400px;
        width: 720px;
        border: 1px solid;
        box-shadow: 0px 0px 0px 8px tan;
}
.mnBox iframe {
        position: absolute;
        left: -248px;;
        top: calc(100% - 50px);
        clip-path: circle(16px at 271px);
        opacity: 0.8;
}
.rain {
        width: 1px;
        height: 8px;
        top: -5px;
        left: 100px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 10px;
        background: #eee;
}

.rain::after { height: 12px; left: -70px; top: 50px; }

.circle {
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;}
}

</style>

<div id="mnBox" class="mnBox">
        <span class="rain"></span>
        <span class="circle"></span>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="https://music.163.com/outchain/player?type=2&id=1301884692&auto=1&height=32"></iframe>
</div>


<script language="javascript">
function rain() {
        var str = "";
        for(i=0; i<20; i++) {
                var l = Math.ceil(Math.random()*800);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
        }
        for(j=0;j<10; j++){
                var k1 = Math.ceil(Math.random()*70+20);
                var k2 = Math.round(Math.random()*20+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
        }
        document.getElementById('mnBox').innerHTML += str;
}
rain();
</script>

马黑黑 发表于 2021-11-2 07:22

加林森 发表于 2021-11-1 23:52
我脾气很好的

那就好那就好

加林森 发表于 2021-11-2 12:13

马黑黑 发表于 2021-11-2 07:22
那就好那就好

中午好。

马黑黑 发表于 2021-11-2 12:24

加林森 发表于 2021-11-2 12:13
中午好。

大家都好

加林森 发表于 2021-11-2 12:59

马黑黑 发表于 2021-11-2 12:24
大家都好

好就对了嘛
页: 1 2 [3]
查看完整版本: 饭后甜点,生活美滋滋 TO:红影