下雨动画效果 可加在网站首页 效果很不错

    

下雨动画效果 可加在网站首页 效果很不错

QQ截图20190415212145.jpg


CSS:

<style>
html, body { 
  height: 100%; 
  margin: 0; 
  background: #261c33; 
  overflow: hidden; 
  display: flex; 
  align-items: center; 
  justify-content: center 
}
</style>

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js"></script>
 //主显示代码
<css-doodle> 
    :doodle {
        @grid: 1x3 / 100vmax;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    }

    @size: 100% 150%;
    position: absolute;
  
    background: @m(100, (
        linear-gradient(transparent, @p(
      #FFFDE1@repeat(2, @p([0-9a-f])), 
      #FB3569@repeat(2, @p([0-9a-f])) 
    ))
        @r(0%, 100%) @r(0%, 100%) /
        @r(1px) @r(23vmin)
        no-repeat
    ));

    will-change: transform;
    animation: f 20s linear calc(-20s / @size() * @i()) infinite;
    @keyframes f {
        from { transform: translateY(-100%) }
        to { transform: translateY(100%) }
    }
</css-doodle>

<script>
</script>
//主显示代码

亿七Seven

  Previous post canvas粒子文字 超炫 鼠标跟随特效
Next post   已到最新一篇

添加新评论

无论有多困难,都坚强地抬头挺胸,告诉所有人,你并非他们想象的那样不堪一击。

每个人心里都有一段伤痕,时间才是最好的疗剂。

人总是珍惜未得到的,而遗忘了所拥有的。

退一步,并不象征我认输;放手,并不表示我放弃;微笑,并不意味我快乐!

人海中再回首,朋友真诚依旧,生命里重逢,心境平和温柔,往事如风,岁月如歌,漫漫人生路,苍桑几许,幸福几何!