论坛 › 欢乐水吧 › 夜雨 （学习雨滴制作）

红影 发表于 2022-2-4 22:59

夜雨 （学习雨滴制作）

<style type="text/css">

.xiaoxiang {
        left:-280px; top: 150px;box-shadow:4px 4px 5px #333;
        position: relative;
        width: 1200px;
        background: #333 url('http://image.hnol.net/c/2022-02/04/19/202202041914056411-5088534.gif') no-repeat ;
        height: 689px;
        overflow: hidden;
}
.xiaoxiang iframe {
        position: absolute;
        left: 108px;;
        top: calc(100% - 428px);
        clip-path: circle(16px at 271px);
        opacity: 0.8;
}
.rain {
      top: 0; height: 0;       
      width: 2px;
        height: 4px;
        background: #eee;
        position:absolute;
        animation: rain 0.5s linear infinite;
}


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

</style>

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

<script language="javascript">

function raining() {
      var pa = document.getElementById('xiaoxiang');
      for(i=0; i<100; i++) {
                var rain = document.createElement('div');
                rain.className = "rain";
                rain.style.left = Rnd(1,100) + "%";
                rain.style.top = Rnd(-600, 10) + "px";
                rain.style.animation = "rain 0." + Rnd(2,9) + "s linear infinite";
                rain.style.animationDelay = Rnd(0,15) + "s";
                pa.appendChild(rain);
      }
}

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

raining();

</script>

红影 发表于 2022-2-4 22:59

@马黑黑请检查作业{:4_187:}

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

( ^_^ )不错嘛，美的创造

加林森 发表于 2022-2-4 23:07

制作漂亮，好美！{:4_190:}

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

马黑黑 发表于 2022-2-4 23:03
( ^_^ )不错嘛，美的创造

雨丝没有落到地上，不过看了看，觉得也差不多，和雨天的感觉挺像的{:4_173:}

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

加林森 发表于 2022-2-4 23:07
制作漂亮，好美！

谢谢队长鼓励，前两天就想做了，正好感冒没精神。

加林森 发表于 2022-2-5 12:10

红影 发表于 2022-2-5 10:15
谢谢队长鼓励，前两天就想做了，正好感冒没精神。

不客气

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

红影 发表于 2022-2-5 10:10
雨丝没有落到地上，不过看了看，觉得也差不多，和雨天的感觉挺像的

雨落的地点，将来有能力再考虑吧{:5_106:}

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

加林森 发表于 2022-2-5 12:10
不客气

这个做完自己还挺喜欢的，只是那个按钮不知道放什么地方更好{:4_173:}

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

马黑黑 发表于 2022-2-5 16:00
雨落的地点，将来有能力再考虑吧

现在就挺喜欢了呢，黑黑的这些雨丝真的太美了{:4_199:}

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

红影 发表于 2022-2-5 19:25
现在就挺喜欢了呢，黑黑的这些雨丝真的太美了

喜欢就多研究研究

加林森 发表于 2022-2-5 19:29

红影 发表于 2022-2-5 19:24
这个做完自己还挺喜欢的，只是那个按钮不知道放什么地方更好

这个应该是可以你喜欢放那里就在那里吧。

红影 发表于 2022-2-5 20:17

马黑黑 发表于 2022-2-5 19:26
喜欢就多研究研究

看到前面那个帖子的介绍，做成现在的样子就已经挺不容易了呢，我就更研究不出了。

马黑黑 发表于 2022-2-5 20:17

红影 发表于 2022-2-5 20:17
看到前面那个帖子的介绍，做成现在的样子就已经挺不容易了呢，我就更研究不出了。

不急慢慢来

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

加林森 发表于 2022-2-5 19:29
这个应该是可以你喜欢放那里就在那里吧。

嗯，现在被我弄文字正下面去了{:4_173:}

红影 发表于 2022-2-5 20:49

马黑黑 发表于 2022-2-5 20:17
不急慢慢来

再慢也弄不出来啊{:4_189:}

马黑黑 发表于 2022-2-5 20:54

红影 发表于 2022-2-5 20:49
再慢也弄不出来啊

那不可能

红影 发表于 2022-2-6 14:34

马黑黑 发表于 2022-2-5 20:54
那不可能

那要等待以后学得更扎实的时候的事了{:4_173:}

加林森 发表于 2022-2-6 14:39

红影 发表于 2022-2-5 20:19
嗯，现在被我弄文字正下面去了

看见了。挺好的。

小辣椒 发表于 2022-2-6 15:52

亲爱的，制作非常的精美，这个学习作业太完美了{:4_199:}

查看完整版本: 夜雨 （学习雨滴制作）