明月逐人归
本帖最后由 马黑黑 于 2023-7-10 07:04 编辑 <br /><br /><style>#mydiv {
margin:-80px 0 0 calc(50% - 581px);
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>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=32743521" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
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>
代码
<!-- 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>
类里，有几个简单的属性，没有方法。
类的实例化，将星星分两半，一般置于月亮的左边、另一半置于月亮的右边。
简简单单，无需太多的华丽，那村，那夜，那月，那小道，那狗，那思念……便营造了出来。 欣赏好贴！于田间明月中，抒款款思念情{:4_187:} 这小狗狗天生就有颜色呢，这么多漂亮的小星星，这个类能做的真多{:4_199:} 看到这个不觉想到天狗食月的成语，哈哈。月亮能变大也很漂亮的设计{:4_187:} 唯美 安静 醉美水芙蓉 发表于 2023-7-10 18:27
欣赏老师独特的构思！
谢谢 上来先看看黑黑最近几天的教程分享。。。。。 看见猫猫生日了，这个我可以套用玩一个 小辣椒 发表于 2023-7-12 21:31
看见猫猫生日了，这个我可以套用玩一个
类似这个的，你以前跟队长都玩过
页:
[1]