画心师（学习黑黑爱的命运心形小播效果）
本帖最后由 雨中悄然 于 2023-3-13 20:37 编辑 <br /><br /><style>#papa {margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightblue url('https://pic.imgdb.cn/item/640d9aecf144a010072f7c61.gif') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
top: 78%; /*145px;*/
left: 19%; /*538px;*/
width: 80px;
height: 80px;
background: #E94142;
transform: rotate(135deg);
opacity: .8;
filter: drop-shadow(-190px -210px 5px #FFC0CB);
animation: beat .45s infinite alternate var(--state);
cursor: pointer;
--state: paused;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
}
#mplayer::before { top: -50px; }
#mplayer::after { left: 50px; }
#mplayer:hover { background: red; }
#lrc { --motion: cover1; --tt: 5s; position: absolute;right:10%;bottom: 30px; font: bold 2.4em sans-serif; color: hsl(200, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); z-index: 99;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(180, 90%, 50%, .45), hsla(260, 50%, 50%, .6), hsla(60, 80%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);z-index: 99; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes beat { to { transform: rotate(135deg) scale(0.9); } }</style><div id="papa"><div id="lrc" data-lrc="花潮lrc在线"></div><div id="mplayer"></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1893824465" autoplay="" loop=""></audio></div><script>(function() {
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();</script><script>let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let mState = () => aud.paused ? (vid.pause(), lrc.style.setProperty('--state', 'paused')) : (vid.play(), lrc.style.setProperty('--state', 'running'));
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};</script> @马黑黑 交份作业 {:4_170:}阴影不会处理，烦请老师指点 欣赏美帖！模仿个心跳
<style>
#heart {
position: relative;
ttop: 80px;
lleft: 80px;
margin:80px auto;
width: 40px;
height: 40px;
background: #E94142;
transform: rotate(-45deg);
opacity: .8;
filter: drop-shadow(0px 0px 10px gray);
animation: heartbeat .5s infinite alternate var(--state);
cursor: pointer;
--state: running;
}
#heart::before, #heart::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
}
#heart::before { top: -25px; }
#heart::after { left: 25px; }
#heart:hover { background: red; }
@keyframes heartbeat { to { transform: rotate(-45deg) scale(0.9); } }
</style>
<div id="heart"></div> 雨中悄然 发表于 2023-3-13 18:11
阴影不会处理，烦请老师指点
试试
filter: drop-shadow(260px -280px 20px #000);
改为
filter: drop-shadow(0px 0px 20px #000); 雨中悄然 发表于 2023-3-13 18:11
@马黑黑 交份作业
100
√
阴影既然不能往下放，那么，可不可以往右边放呢？比如，既然心在男子的胸前，其阴影是否也可以考虑放在女子的胸前、且颜色也是红的？
心形的原始CSS代码：
#mplayer {
position: absolute;
top: 78%; /*145px;*/
left: 19%; /*538px;*/
width: 80px;
height: 80px;
background: #E94142;
transform: rotate(135deg);
opacity: .8;
filter: drop-shadow(260px -280px 20px #000);
animation: beat .45s infinite alternate var(--state);
cursor: pointer;
--state: paused;
}
暗红色那行，就是阴影投射。四个参数：260px 是水平阴影位置，-280px是垂直阴影位置，20px是模糊半径，#000是阴影颜色。改一改位置值，就可以将心形的阴影放到女生的胸前，改颜色就不用说了吧？
此外，绿色部分代码，是我原来留下的，已经注释掉，可以不要，或将前面的百分比的值去掉，改用实际的像素值。
马黑黑 发表于 2023-3-13 19:44
100
√
{:4_199:}没扣分，太好了 马黑黑 发表于 2023-3-13 19:50
阴影既然不能往下放，那么，可不可以往右边放呢？比如，既然心在男子的胸前，其阴影是否也可以考虑放在女子 ...
改了，老师瞧瞧{:4_187:}这个创意好
马黑黑 发表于 2023-3-13 19:50
阴影既然不能往下放，那么，可不可以往右边放呢？比如，既然心在男子的胸前，其阴影是否也可以考虑放在女子 ...
绿色部分我再去试试是个啥情况{:4_170:} 起个网名好难 发表于 2023-3-13 19:08
试试
filter: drop-shadow(260px -280px 20px #000);
改为
{:4_187:}感谢指点回复 起个网名好难 发表于 2023-3-13 18:42
欣赏美帖！模仿个心跳
感谢临贴 {:4_187:} 醉美水芙蓉 发表于 2023-3-13 20:54
悄然厉害！要是播放器能控制歌词就更好了！
咦，是这个道理。不过我加个歌词就加得满头汗{:4_170:} 醉美水芙蓉 发表于 2023-3-13 20:54
悄然厉害！要是播放器能控制歌词就更好了！
谢谢提醒啊{:4_187:} 醉美水芙蓉 发表于 2023-3-13 20:58
厉害！会改编老师的播放器！
我新手啥也不会改啊。老师7楼教着呢{:4_170:} 醉美水芙蓉 发表于 2023-3-13 21:02
我都没有见过谁会加 歌词呢？你是第一个！厉害！
https://www.huachaowang.com/forum.php?mod=viewthread&tid=67048&extra=page%3D2
瞧这里，抄红影的歌词作业{:4_173:} 醉美水芙蓉 发表于 2023-3-13 21:02
我都没有见过谁会加 歌词呢？你是第一个！厉害！
{:4_170:}我会四处抄作业