一个没啥用但是很好康的小玩意儿 方块滑落
<!-- jquery的链接失效了 如果复制的话需要修改链接 -->
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>Document</title> 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 <!-- <audio src="./music/茶太 - 小さな手のひら.mp3" autoplay="true"></audio> --> 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 = $('<div/>').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>
