|
|

楼主 |
发表于 2022-5-25 21:28
|
显示全部楼层
- <style>
- .wrap {
- width: 760px;
- height: 600px;
- background: lightblue;
- position: relative;
- }
- .drop {
- position: absolute;
- width: 150px;
- height: 150px;
- background-color: rgba(255,255,255,.35);
- background-image: radial-gradient(rgba(255,255,255,.25),rgba(255,255,255,.65));
- border-radius: 35% 65% 69% 31% / 53% 53% 47% 47%;
- box-shadow: inset 10px 10px 10px rgba(0,0,0,.05),
- 15px 25px 10px rgba(0,0,0,.1),
- 15px 20px 20px rgba(0,0,0,.05),
- inset -10px -10px 15px rgba(255,255,255,.9);
- display: block;
- backdrop-filter: blur(30px);
- }
- </style>
- <div class="wrap"></div>
- <script>
- let wrap = document.querySelector('.wrap');
- let str = '';
- for(i = 0; i < 100; i++){
- str += `<span class="drop" style="width: ${numBtween(50,100)}px; height: ${numBtween(50,100)}px; left: ${numBtween(50,660)}px; top: ${numBtween(50,500)}px;"></span>`;
- }
- wrap.innerHTML += str;
- function numBtween(min,max){ return Math.floor(Math.random() * (max-min+1)) + min; }
- </script>
复制代码
|
|