论坛 › 动画音画 › 致影子

马黑黑 发表于 2022-2-3 22:39

致影子

<style>
.mybox {
        margin: auto;
        position: relative;
        width: 720px;
        height: 460px;
        overflow: hidden;
        background: linear-gradient(180deg, black,silver, transparent, olive);
}
.mybox iframe {
        position: absolute;
        left: -248px;
        top: calc(100% - 50px);
        clip-path: circle(16px at 271px);
        opacity: 0.8;
}
.snow {
        position: absolute;
        top: 0; left: 0;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-image:
                linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
                linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),
                linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
                linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);
        opacity: 0.6;
        animation: fly 10s linear infinite, xie 10s ease-in infinite;
}
@keyframes fly {
        100% { top: 100%; }
}
@keyframes xie {
        100% { transform: translateX(100px)rotate(360deg); }
}
</style>

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

<script language="javascript">

function addsnow() {
        var o = document.getElementById('mybox');
        for(i=0; i<666; i++) {
                var snow = document.createElement('div');
                var hw = Rnd(5,20);
                snow.className = "snow";
                snow.style.top = Rnd(-600,-20) + "px";
                snow.style.animationDelay = Rnd(0,15) + "s";
                snow.style.animation.duration = Rnd( 5,12) + "s";
                snow.style.width = hw + "px";
                snow.style.height = hw + "px";
                snow.style.left = Rnd(-100,710) + "px";
                o.appendChild(snow);
        }
}

function Rnd(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }

addsnow();

</script>

马黑黑 发表于 2022-2-3 22:52

这个场景，是我在呼伦贝尔看到的，我不记得具体的时间，反正是在早晨。

请原谅我还原的情景不够精准，毕竟，那个时候，我不怎么睁得开眼。

美丽的时刻总是美丽的记忆。当美丽依然存在，即使只是存在于记忆中，生活就是美丽的。

樵歌 发表于 2022-2-4 08:04

哇，这个礼物凡南方女孩了都特别喜欢特别开心特别高兴特别愉悦，特别的特别一切都特别俱一格的美！
小黑能 让静物动起来，简直有点石成多的妙手。{:4_190:}

樵歌 发表于 2022-2-4 08:04

红影收礼开森。@红影

马黑黑 发表于 2022-2-4 08:47

樵歌 发表于 2022-2-4 08:04
哇，这个礼物凡南方女孩了都特别喜欢特别开心特别高兴特别愉悦，特别的特别一切都特别俱一格的美！
小黑能 ...

早上好！

红影 发表于 2022-2-4 11:58

谢谢黑黑，大片大片的雪花从天空飘落。真是太美了，意外的惊喜{:4_187:}

红影 发表于 2022-2-4 12:01

这个是全css代码模拟的场景呢，黑黑太棒了{:4_199:}

红影 发表于 2022-2-4 12:05

这些雪花旋转着，飘飞着，古人云，燕山雪花大如席，片片吹落轩辕台。便是如此吧。
看着大如席的雪花，很震撼{:4_173:}

马黑黑 发表于 2022-2-4 12:14

红影 发表于 2022-2-4 12:05
这些雪花旋转着，飘飞着，古人云，燕山雪花大如席，片片吹落轩辕台。便是如此吧。
看着大如席的雪花，很震 ...

这样的雪我见过很多次，不过在南方，只见过几次米雪。米雪像米粒，下的急，把下雨的雨丝改一改就是下米雪的样子

红影 发表于 2022-2-4 15:04

马黑黑 发表于 2022-2-4 12:14
这样的雪我见过很多次，不过在南方，只见过几次米雪。米雪像米粒，下的急，把下雨的雨丝改一改就是下米雪 ...

是的，南方的雪很少有单独的漂亮的大雪花，很多是米雪或者雨夹雪{:4_173:}

马黑黑 发表于 2022-2-4 19:47

红影 发表于 2022-2-4 15:04
是的，南方的雪很少有单独的漂亮的大雪花，很多是米雪或者雨夹雪

以前我收集过大量的雪花标本

红影 发表于 2022-2-4 21:55

马黑黑 发表于 2022-2-4 19:47
以前我收集过大量的雪花标本

那是到真正下雪的地方收集的吧。

马黑黑 发表于 2022-2-4 23:09

红影 发表于 2022-2-4 21:55
那是到真正下雪的地方收集的吧。

那肯定的

樵歌 发表于 2022-2-5 07:45

马黑黑 发表于 2022-2-4 08:47
早上好！

早上好{:4_190:}

红影 发表于 2022-2-5 10:24

马黑黑 发表于 2022-2-4 23:09
那肯定的

雪花标本也可以保存的么，为什么要收集这个？

马黑黑 发表于 2022-2-5 15:57

红影 发表于 2022-2-5 10:24
雪花标本也可以保存的么，为什么要收集这个？

那是小时候的事情。一般保存不了的

马黑黑 发表于 2022-2-5 16:02

樵歌 发表于 2022-2-5 07:45
早上好

{:4_180:}

红影 发表于 2022-2-5 19:39

马黑黑 发表于 2022-2-5 15:57
那是小时候的事情。一般保存不了的

黑黑的兴趣很广泛呢，居然连这个都收集{:4_204:}

马黑黑 发表于 2022-2-5 19:40

红影 发表于 2022-2-5 19:39
黑黑的兴趣很广泛呢，居然连这个都收集

好奇心使人涉猎广泛

东篱闲人 发表于 2022-2-5 19:41

给影子送雪花？{:5_115:}

查看完整版本: 致影子