网页设计自适应飘雪特效的方法

【导读】记得圣诞节时有不少网站上出现雪花飞舞的特效,看着很唯美,那么我们如果使自己的网站也具备这样的效果呢? 我们可以参考HTML5 canvas制作的3D雪花特效插件nice-Snowing。

    记得圣诞节时有不少网站上出现雪花飞舞的特效,看着很唯美,那么我们如果使自己的网站也具备这样的效果呢?

    我们可以参考HTML5 canvas制作的3D雪花特效插件nice-Snowing。

    使用到的详细js代码我们也分享出来,点击这边下载:立即下载 密码: dtd8

    如同网页表面出现下雨特效一样,雪花特效使用不同的canvas来制作不同层次的雪花效果,使整个下雪场景具有明显的3D空间层次感,使下雪效果更加真实。

网页设计自适应飘雪特效的方法

    具体怎么实现?马氪软件总结了两步:

 

    一、头部header引入

 

    <style>

    .snow-canvas {

    display: block;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    position: fixed;

    pointer-events: none;

    }

    </style>

 

    二、底部footer引入

 

    <canvas class="snow-canvas" speed="1" interaction="false" size="2" count="80"  opacity="0.00001" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)"  wind-power="0" image="false" width="1366" height="667"></canvas>

    <canvas class="snow-canvas" speed="2" interaction="true" size="6" count="30" start- color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind- power="2" image="false" width="1366" height="667"></canvas>

    <canvas class="snow-canvas" speed="3" interaction="true" size="12" count="20" wind- power="-5" image="imgs/snow.png" width="1366" height="666"></canvas>

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="js/snow-plugin.js"></script>

    <script>

    $(function(){

    $(".snow-canvas").snow();

    });

    </script>

    经过这两步,再刷新你的网页就能看到“雪花那个飘”啦,特效比较真实的(而且是自适应网页-响应式),喜欢就收藏。

    无锡做网站也会不定期更新技术类文章,方便更多朋友了解网站设计开发知识,做到心中有数。 


本文链接:http://mkapps.cn/news/design/210.html

无锡第二秀网络科技有限公司

  • 旗下 : 马氪软件
  • 主营业务 : 网站设计开发;微信公众号、小程序开发;APP开发;网络营销推广;广告设计 等
  • 联系人 : 徐经理
  • 手机 : 18706171959
  • 电话 : 0510-85873959
  • 邮箱 : b1990g228@qq.com
  • 网址 : http://mkapps.cn

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章