爱心飘落

最新推荐文章于 2021-08-09 13:07:57 发布

AsherLeePop

最新推荐文章于 2021-08-09 13:07:57 发布

阅读量173

点赞数 1

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/kmust-city/p/11448974.html

版权

　　自学了一段时间的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>

效果如下图：

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

转载于:https://www.cnblogs.com/kmust-city/p/11448974.html

AsherLeePop

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
爱心飘落

　　自学了一段时间的web前端，写了一些东西，虽然有前辈已经写过类似的东西，但是我自己觉得这个挺有意思的，就自己写了一个，话不多说，看看我自己的。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generat...
复制链接

扫一扫