1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Documenttitle>
7 <style>
8 body{
9 padding: 0;
10 margin: 0;
11 height: 100vh;
12 }
13 .container{
14 /* background-image: url("./img/yjzy.jpg") ; */
15 background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590162800905&di=b3084c6943d34abbefbeb70a56a6bb38&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fdbb44aed2e738bd49ee05b69a98b87d6267ff9a1.jpg") ;
16 width: 100%;
17 height: 100%;
18 overflow: hidden;
19 background-size: cover;
20 }
21 .container .block{
22 width: 12.5%;
23 height: 12.5%;
24 background-color: #F0F0F0;
25 border: 2px solid darkgrey;
26 display: block;
27 float: left;
28 box-sizing: border-box;
29 margin: 0;
30 box-shadow: black;
31 }
32 .container .fall{
33 z-index: 999;
34 background-color: #00FF00;
35 transition: 0.2s;
36 pointer-events: none;
37 animation: fall 2s linear forwards;
38 }
39 @keyframes fall{
40 0%{
41 transform: translateY(0);
42 }
43 100%{
44 transform: translateY(1000px);
45 }
46 }
47 style>
48 <script src="https://code.jquery.com/jquery-3.4.1.min.js">script>
49 head>
50 <body>
51 <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" style="display: none;" src="https://music.163.com/outchain/player?type=2&id=760173&auto=1&height=0">iframe>
52
53 <div class="container">
54 <div class="block">div>
55 <div class="block">div>
56 <div class="block">div>
57 <div class="block">div>
58 <div class="block">div>
59 <div class="block">div>
60 <div class="block">div>
61 <div class="block">div>
62 <div class="block">div>
63 <div class="block">div>
64 <div class="block">div>
65 <div class="block">div>
66 <div class="block">div>
67 <div class="block">div>
68 <div class="block">div>
69 <div class="block">div>
70 <div class="block">div>
71 <div class="block">div>
72 <div class="block">div>
73 <div class="block">div>
74 <div class="block">div>
75 <div class="block">div>
76 <div class="block">div>
77 <div class="block">div>
78 <div class="block">div>
79 <div class="block">div>
80 <div class="block">div>
81 <div class="block">div>
82 <div class="block">div>
83 <div class="block">div>
84 <div class="block">div>
85 <div class="block">div>
86 <div class="block">div>
87 <div class="block">div>
88 <div class="block">div>
89 <div class="block">div>
90 <div class="block">div>
91 <div class="block">div>
92 <div class="block">div>
93 <div class="block">div>
94 <div class="block">div>
95 <div class="block">div>
96 <div class="block">div>
97 <div class="block">div>
98 <div class="block">div>
99 <div class="block">div>
100 <div class="block">div>
101 <div class="block">div>
102 <div class="block">div>
103 <div class="block">div>
104 <div class="block">div>
105 <div class="block">div>
106 <div class="block">div>
107 <div class="block">div>
108 <div class="block">div>
109 <div class="block">div>
110 <div class="block">div>
111 <div class="block">div>
112 <div class="block">div>
113 <div class="block">div>
114 <div class="block">div>
115 <div class="block">div>
116 <div class="block">div>
117 <div class="block">div>
118 div>
119 body>
120
121
122 <script type="text/javascript">
123 $(function(){
124 $('.block').mouseover(function(){
125 $(this).addClass('fall')
126 })
127 })
128 script>
129
130
131
132 <script type="text/javascript">
133 (function($){
134 $.fn.snow = function(options){
135 var $flake = $('').css({'position': 'absolute','z-index':'99', 'top': '-50px'}).html('?'),
136 documentHeight = $(document).height(),
137 documentWidth = $(document).width(),
138 defaults = {
139 minSize : 10,
140 maxSize : 20,
141 newOn : 1000,
142 flakeColor : "#AFDAEF" /* 雪花颜色 */
143 },
144 options = $.extend({}, defaults, options);
145
146 endPositionTop = documentHeight - documentHeight * 0.3;
147
148 var interval= setInterval( function(){
149 var startPositionLeft = Math.random() * documentWidth - 100,
150 startOpacity = 0.5 + Math.random(),
151 sizeFlake = options.minSize + Math.random() * options.maxSize,
152
153 endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
154 durationFall = documentHeight * 10 + Math.random() * 5000;
155 $flake.clone().appendTo('body').css({
156 left: startPositionLeft,
157 opacity: startOpacity,
158 'font-size': sizeFlake,
159 color: options.flakeColor
160 }).animate({
161 top: endPositionTop,
162 left: endPositionLeft,
163 opacity: 0.2
164 },durationFall,'linear',function(){
165 $(this).remove()
166 });
167 }, options.newOn);
168 };
169 })(jQuery);
170 $(function(){
171 $.fn.snow({
172 minSize: 10, /* 定义雪花最小尺寸 */
173 maxSize: 45,/* 定义雪花最大尺寸 */
174 newOn: 1000 /* 定义密集程度，数字越小越密集，cup使用率越高,建议最高设置成3000 */
175 });
176 });
177 script>
178 html>