论坛 › 欢乐水吧 › 江南印记

马黑黑 发表于 2022-2-2 09:46

江南印记

本帖最后由 马黑黑 于 2022-2-2 09:47 编辑 <br /><br /><style type="text/css">

.mnBox {
        margin: auto;
        margin-top: 20px;
        position: relative;
        background: #333 url('https://www.huachaowang.com/data/attachment/forum/202202/02/094453zg7muoh2noo26unp.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=1391393777&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()*100);
                var k2 = Math.round(Math.random()*20+80);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
        }
        document.getElementById('mnBox').innerHTML += str;
}
rain();
</script>

樵歌 发表于 2022-2-2 10:04

江南春雨图。有味。

加林森 发表于 2022-2-2 10:25

好漂亮的江南春雨图，真美。

马黑黑 发表于 2022-2-2 10:31

樵歌 发表于 2022-2-2 10:04
江南春雨图。有味。

上午好，过节后！

马黑黑 发表于 2022-2-2 10:31

加林森 发表于 2022-2-2 10:25
好漂亮的江南春雨图，真美。

队长上午好，初二过节好！

加林森 发表于 2022-2-2 10:46

马黑黑 发表于 2022-2-2 10:31
队长上午好，初二过节好！

老黑上午好，初二快乐！
准备跟你学习这个帖，去制作一下，看能不能制作出来。

马黑黑 发表于 2022-2-2 10:48

加林森 发表于 2022-2-2 10:46
老黑上午好，初二快乐！
准备跟你学习这个帖，去制作一下，看能不能制作出来。

这个代码量虽大，所需元素不多，道理上不难制作。关键是一些数值的调整。

加林森 发表于 2022-2-2 10:57

马黑黑 发表于 2022-2-2 10:48
这个代码量虽大，所需元素不多，道理上不难制作。关键是一些数值的调整。

嗯嗯，谢谢老黑。

加林森 发表于 2022-2-2 11:35

老黑的这张图片选得真好，有阳光还有水雾，这个题材挺漂亮的。

红影 发表于 2022-2-2 12:23

这个这个，竟然是全css模拟出来的，黑黑厉害{:4_187:}

马黑黑 发表于 2022-2-2 13:42

加林森 发表于 2022-2-2 11:35
老黑的这张图片选得真好，有阳光还有水雾，这个题材挺漂亮的。

俺的审美能力不是很差，毕竟是教美学的（不是没学哦）

马黑黑 发表于 2022-2-2 13:42

红影 发表于 2022-2-2 12:23
这个这个，竟然是全css模拟出来的，黑黑厉害

就是雨和涟漪，还不对标{:4_170:}

红影 发表于 2022-2-2 14:20

马黑黑 发表于 2022-2-2 13:42
就是雨和涟漪，还不对标

那些涟漪比雨丝更美呢{:4_187:}

马黑黑 发表于 2022-2-2 14:25

红影 发表于 2022-2-2 14:20
那些涟漪比雨丝更美呢

美不美，故乡水

红影 发表于 2022-2-2 14:27

马黑黑 发表于 2022-2-2 14:25
美不美，故乡水

那些JS好复杂。另外，我说呢HTML里用span而不是div，这里面也有讲究的吧。

马黑黑 发表于 2022-2-2 14:30

红影 发表于 2022-2-2 14:27
那些JS好复杂。另外，我说呢HTML里用span而不是div，这里面也有讲究的吧。

没有。它们的区别仅在于： div 以 block 为自己的 display值，span是行内元素，所以应用的时候，要声明 display 为 block 值，否则它们是连都一起的

加林森 发表于 2022-2-2 17:12

马黑黑 发表于 2022-2-2 13:42
俺的审美能力不是很差，毕竟是教美学的（不是没学哦）

嗯嗯，谢谢你的分享。{:4_190:}

马黑黑 发表于 2022-2-2 17:27

加林森 发表于 2022-2-2 17:12
嗯嗯，谢谢你的分享。

不客气

加林森 发表于 2022-2-2 18:10

马黑黑 发表于 2022-2-2 17:27
不客气

我重新把我的帖也改变了一下，你去看看。

樵歌 发表于 2022-2-2 18:44

马黑黑 发表于 2022-2-2 10:31
上午好，过节后！

过节后也开心。

查看完整版本: 江南印记