|
|

楼主 |
发表于 2023-7-10 07:05
|
显示全部楼层
代码
- <!-- CSS代码 -->
- <style>
- /* 父元素 */
- #mydiv {
- margin: 20px auto 0;
- width: 1000px;
- height: 667px;
- z-index: 1;
- background: #333 url('https://638183.freep.cn/638183/t23/2/night.jpeg');
- box-shadow: 0 0 8px 0 #000;
- overflow: hidden;
- position: relative;
- --state: paused;
- }
- /* 父元素伪元素 :通用属性 */
- #mydiv::before, #mydiv::after {
- position: absolute;
- content: '';
- cursor: pointer;
- transition: 1s;
- }
- /* 狗 */
- #mydiv::before {
- content: '\1F415';
- font: normal 60px sans-serif;
- transform: translate(510px,540px) rotate(45deg);
- }
- /* 月亮 */
- #mydiv::after {
- width: 80px;
- height: 80px;
- background: linear-gradient(45deg,antiquewhite 0%, snow 90%, snow 100%);
- border-radius: 50%;
- left: calc(50% - 40px);
- top: 20px;
- box-shadow: 0 0 30px 0px lightblue, 0 0 100px 0 white;
- }
- /* 月亮变大 */
- #mydiv:hover:after { transform: scale(1.2); }
- /* 粒子 */
- li-zi {
- position: absolute;
- background: lightblue;
- opacity: .9;
- transform: rotate(-45deg);
- animation: flash .5s var(--delay) infinite alternate var(--state);
- --delay: 0s;
- }
- /* 关键帧动画 :旋转+闪烁 */
- @keyframes flash {
- to { transform: rotate(-30deg); opacity: .2; }
- }
- </style>
- <!-- HTML代码 -->
- <div id="mydiv"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=32743521" autoplay="autoplay" loop="loop"></audio>
- <!-- JS代码 -->
- <script>
- //类
- let total = 100;
- class Lizi {
- constructor(pa,size = 20) {
- this.pa = pa;
- this.size = size;
- this.left = 10;
- this.top = 10;
- this.ele = document.createElement('li-zi');
- }
- creating() {
- this.ele.style.cssText = `
- width: ${this.size}px;
- height: ${this.size}px;
- left: ${this.left}px;
- top: ${this.top}px;
- `;
- this.pa.appendChild(this.ele);
- }
- }
- //实例化类
- Array.from({length: total}).forEach((element,key) => {
- let r = 10 + Math.random() * 160;
- element = new Lizi(mydiv);
- element.size = 2 + Math.ceil(Math.random() * 2);
- element.left = key < total / 2 ? Math.random() * 400 : 600 + Math.random() * 390;
- element.top = key < total / 2 ? Math.random() * 200 : Math.random() * 160;
- element.creating();
- element.ele.style.setProperty('--delay', Math.random() + 's');
- });
- //音频控制
- let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|