半纸心事
本帖最后由 马黑黑 于 2023-11-27 09:40 编辑 <br /><br /><style>#papa {
margin: -70px 0 0 calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/3/008.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
--state: running;
}
.play_pic {
position: absolute;
cursor: pointer;
}
.play_pic:nth-of-type(1) {
width: 300px;
opacity: .8;
transform: rotate(145deg);
transition: 1.5s;
}
.play_pic:nth-of-type(2) {
width: 200px;
bottom: 10px;
right: 10px;
animation: rot 10s infinite var(--state);
}
.play_pic:nth-of-type(1):hover { opacity: 0; }
@keyframes rot {
to { transform: rotate(1turn); }
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1914628093" autoplay loop></audio>
<img class="play_pic" src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" alt="" />
<img class="play_pic" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" alt="" />
</div>
<script>
(function() {
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'top: 20px; right: 200px; font-size: 2em;',
});
});
for(i = 0; i < 6; i++) {
let img = document.createElement('img');
img.className = 'play_pic';
img.alt = '';
img.src = 'https://638183.freep.cn/638183/web/svg/sunfl-2.svg';
img.style.cssText += `
left: ${i * 10 + 10}px;
top: ${i * 5 + 10}px;
width: ${i * 50 + 50}px;
height: ${i * 50 + 50}px;
filter: opacity(${Math.random() * 0.5 + 0.5}) hue-rotate(${Math.random() * 360}deg);
animation: rot ${Math.random() * 6 + 4}s ${Math.random() * -3}s infinite linear var(--state);
`;
papa.appendChild(img);
}
})();
</script>
帖子代码
<style>
#papa {
margin: -70px 0 0 calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/3/008.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
--state: running;
}
.play_pic {
position: absolute;
cursor: pointer;
}
.play_pic:nth-of-type(1) {
width: 300px;
opacity: .8;
transform: rotate(145deg);
transition: 1.5s;
}
.play_pic:nth-of-type(2) {
width: 200px;
bottom: 10px;
right: 10px;
animation: rot 10s infinite var(--state);
}
.play_pic:nth-of-type(1):hover { opacity: 0; }
@keyframes rot {
to { transform: rotate(1turn); }
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1914628093" autoplay loop></audio>
<img class="play_pic" src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" alt="" />
<img class="play_pic" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" alt="" />
</div>
<script>
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'top: 20px; right: 200px; font-size: 2em;',
});
});
for(i = 0; i < 6; i++) {
let img = document.createElement('img');
img.className = 'play_pic';
img.alt = '';
img.src = 'https://638183.freep.cn/638183/web/svg/sunfl-2.svg';
img.style.cssText += `
left: ${i * 10 + 10}px;
top: ${i * 5 + 10}px;
width: ${i * 50 + 50}px;
height: ${i * 50 + 50}px;
filter: opacity(${Math.random() * 0.5 + 0.5}) hue-rotate(${Math.random() * 360}deg);
animation: rot ${Math.random() * 6 + 4}s ${Math.random() * -3}s infinite linear var(--state);
`;
papa.appendChild(img);
}
</script>
新制作层出不穷，佩服，佩服！{:5_116:} 彩虹伞和太阳花都是播放器按钮呢，点击都能暂停{:4_199:} nth-of-type(1)这个是彩虹伞吧，鼠标移动上去就变成了透明，让伞后的女子被显示出来{:4_173:} 最难的是左上角的6个太阳花，直接用JS画出来的。
又看了看，不是画的，而是直接使用了太阳花的svg图片，对它们重新进行了设置。{:4_187:} 太阳花的设置这个太棒了，又是新知识呢{:4_199:} 对一张图图可以调整色相、透明度以及位置、大小和动画形态，然后可以生出一堆来。这个好玩{:4_187:} 梦油 发表于 2023-11-27 10:23
新制作层出不穷，佩服，佩服！
{:4_190:} 红影 发表于 2023-11-27 10:42
彩虹伞和太阳花都是播放器按钮呢，点击都能暂停
因为它们都用了 class="play_pic" 属性，这个插件就是这么干的：有一个支持一个 红影 发表于 2023-11-27 10:54
太阳花的设置这个太棒了，又是新知识呢
这是父元素设定的子元素的默认位置 红影 发表于 2023-11-27 10:45
nth-of-type(1)这个是彩虹伞吧，鼠标移动上去就变成了透明，让伞后的女子被显示出来
彩虹伞是第一个代码流里出现的 .play_pic，所以 :nth-of-type(1) 指向它 红影 发表于 2023-11-27 10:52
最难的是左上角的6个太阳花，直接用JS画出来的。
又看了看，不是画的，而是直接使用了太阳花的svg图片，对 ...
JS里，用一个循环语句将多个图片添加到 papa 元素，添加前给它们设置一些基本属性。 红影 发表于 2023-11-27 10:58
对一张图图可以调整色相、透明度以及位置、大小和动画形态，然后可以生出一堆来。这个好玩
这些就是综合运用了 醉美水芙蓉 发表于 2023-11-27 12:02
彩虹伞一点就隐形了，太阳撒花花！
手机看的吧？再点右下角的太阳花，伞就会恢复