zoukankan      html  css  js  c++  java
  • ~~圣诞节到啦, canvas雪花效果, 漂亮到简直没天理啊~~

       看到coding的主界面有雪花, 原来,哇,  真漂亮, 一看源代码, 哦了个去, angular写的, 压力好大, 分析分析分析分析....

       然后就写成jQ插件的样子给大家用了。

       在线预览的页面是: http://1.keepu.sinaapp.com/snow/snow.html

       Github的代码地址是: http://sqqihao.github.io/nice-Snowing ;

      上图了

      后面把angular拿掉了,直接引用jQuery就好了,其实不用jQuery也行的哇, 兼容没弄哇;

      HTML的代码就是canvas就好了,如下

    <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="3" 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="snow.png" width="1366" height="667"></canvas>

      所有的配置都是在canvas节点上面的, 看节点属性的名字就知道是神马意思了,

      比如:

        添加image这个属性是图片地址, 让雪花自定义成喜欢的样子;

        size表示的是图片的大小
        count表示图片的个数..等等;

      直接戳实例地址:打开demo;
     
  • 相关阅读:
    box-sizing
    max-width
    如何编写高质量CSS
    CSS文字大小单位PX、EM、PT
    jQuery设计思想
    pageX,clientX,offsetX,layerX的那些事
    html块级元素和内联元素区别详解
    centos彻底删除mysql
    删:[CentOS 7] 安装nginx
    CentOS7.0安装与配置Tomcat-7
  • 原文地址:https://www.cnblogs.com/diligenceday/p/4171852.html
Copyright © 2011-2022 走看看