zoukankan      html  css  js  c++  java
  • css3写下雨效果

    css3写下雨效果
    <pre>
    <div class="xiayuxiaoguo">
    </div>
    </pre>

    <pre>
    .xiayuxiaoguo{
    100%;
    height: 100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 2;
    }
    .xiayu {
    animation: xiayu 2s forwards;
    -webkit-animation: xiayu 2s forwards;
    }


    @keyframes xiayu /* Firefox */
    {

    to {
    top: 130%;
    }
    }

    @-webkit-keyframes xiayu /* Safari 和 Chrome */
    {

    to {
    top: 130%;
    }
    }
    .yudi{
    2px;
    height: 10px;
    position: absolute;
    top:0%;
    background: #000;
    }
    </pre>
    <pre>
    xiayu();
    function xiayu() {
    setTimeout(function () {
    var leftsuiji=RandomNumBoth(0,100);
    var yudi='<div style="left:'+leftsuiji+'%;" class="yudi xiayu"></div>';
    $(".xiayuxiaoguo").append(yudi);
    xiayu();
    if($('.yudi').length>=150){
    $('.yudi').remove();
    }
    },100)
    }
    function RandomNumBoth(Min,Max){
    var Range = Max - Min;
    var Rand = Math.random();
    var num = Min + Math.round(Rand * Range); //四舍五入
    return num;
    }
    </pre>

    大致就是利用jquery动态创建雨滴 然后播放css3动画就OK了

  • 相关阅读:
    psp4
    一维循环数组最大子数组求解
    psp3
    psp2
    求二维数组最大连续子数组
    计算连续最大子数组问题
    psp1
    关于30道题目问题
    Java 文件操作
    java iterator
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11871482.html
Copyright © 2011-2022 走看看