爱心飘落 - 叶倾柔

　　自学了一段时间的web前端，写了一些东西，虽然有前辈已经写过类似的东西，但是我自己觉得这个挺有意思的，就自己写了一个，话不多说，看看我自己的。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="爱心飘落">
  <meta name="Description" content="">
  <title>爱心飘落</title>
  <style>
    body{
        overflow:hidden;
        margin:0;
        position:fixed;
        width:100%;
        height:100%;
        background:url('images/1.jpg') no-repeat;
        background-size:cover;
    }
    
    .snowfall-flakes:before{
        content:"";
        position:absolute;/*绝对定位*/
        left:0;
        top:0;
        width:10px;
        height:16px;
        background-color:red;
        border-radius:5px 5px 0px 0px;
        transform:rotate(-45deg);
    }
    .snowfall-flakes:after{
        content:"";
        position:absolute;
        left:0;
        top:0;
        width:10px;
        height:16px;
        background-color:red;
        border-radius:5px 5px 0px 0px;
        transform:translateX(4.3px) rotate(45deg);
    }
  </style>
 </head>
 <body>
    <script src="https://files.cnblogs.com/files/kmust-city/snowfall.jquery.js"></script>
    <script src="https://files.cnblogs.com/files/kmust-city/jquery-1.2.6.min.js"></script>
    <script>
        $(document).snowfall({flakCount :100,maxSpeed :10})    
    </script>
 </body>
</html>

效果如下图：

背景图可以自己更改，喜欢那张用那张，我自己都是网上下载用的，哈哈。

posted on 2019-09-02 21:54 叶倾柔阅读(441) 评论(2) 收藏举报

刷新页面返回顶部