爱的命运
本帖最后由 马黑黑 于 2023-3-11 23:55 编辑 <br /><br /><style>#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/1/destiny.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
top: 145px;
left: 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;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
}
#mplayer::before { top: -40px; }
#mplayer::after { left: 40px; }
#mplayer:hover { background: red; }
@keyframes beat { to { transform: rotate(135deg) scale(0.9); } }
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=541230" 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>
帖子代码
<style>
#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/1/destiny.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
top: 22.7%; /*145px;*/
left: 52.5%; /*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;
}
#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; }
@keyframes beat { to { transform: rotate(135deg) scale(0.9); } }
</style>
<div id="papa">
<div id="mplayer"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=541230" 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>
本帖最后由 马黑黑 于 2023-3-11 08:34 编辑
帖子实现机制的简单解释：
帖子HTML结构很简单：父元素（即帖子外框id="papa" 的 div）之内带一个可视元素（心形播放器，id="mplayer" 的 div）和一个没有可视界面的音频元素(id="aud" 的 audio）。
这些HTML元素，由前面的 CSS 代码制定了它们的样式（01-37行）。其中：
① 帖子呈现出来的图片为父元素的背景图片（06行）。
② 心形播放器用一个div做成，它带两个伪元素，div元素和其两个伪元素共同构成心形，再旋转一定角度令其变为帖子所展示出来的样子（11-34行）。
③ 心形播放器鼠标移动交互：用伪类 :hover 实现，鼠标指针移到心形图案是心形变色（35行）。
④ CSS关键帧动画：心脏跳动（36行），使用 transform 2的变换的 scale 即伸缩变化模拟心脏跳动，然后在 #mplayer ID选择器通过 animation 属性调用（21行），每 0.45秒 调用一次，反复、往复运行，且依据 CSS变量 --state 决定是否运行。
CSS不能完成大量的交互操作，因此，必须借助JS来实现主要交互功能：
⑤ 变量 --state 的赋值通过 JS 的 mState 函数（46行）动态赋予，它依据音频播放器 audio （ID为 aud）的暂停/播放状态分别赋予 paused 或 running 两个值，即暂停或运行关键帧动画。
⑥ JS代码中，通过监听 #aud 音频播放器的播放与暂停状态来控制心形按钮的跳动，监听到了这两个状态，都运行 mState 函数（47、48行）。
⑦ 同时监听 mplayer 心形按钮的单击事件以决定是播放还是暂停音乐（49行）。 真漂亮！ 感谢黑哥的分享！ 阿狄丽娜 发表于 2023-3-11 08:33
真漂亮！
一班一班，也许是二班{:4_170:} 阿狄丽娜 发表于 2023-3-11 08:34
感谢黑哥的分享！
{:4_190:} 用代码画心形记得以前看懂了，现在怎么又有点迷糊了{:4_173:} 两只鸟儿嘴对嘴，衔起黑黑制作的代码心{:4_173:} 红影 发表于 2023-3-11 10:43
两只鸟儿嘴对嘴，衔起黑黑制作的代码心
这个创意咋样？ 红影 发表于 2023-3-11 10:31
用代码画心形记得以前看懂了，现在怎么又有点迷糊了
就是一个矩形、两给圆形拼装起来的。三个东东宽高尺寸一样，圆形的一个上移、一个下移相等距离（最好是50%吧）。元素间存在父子关系，矩形的是父元素，圆形的是子元素，且父元素设置为 position: relative; 定位、子元素设置为 position: absolute; 定位。试参考以下代码：
<style>
#mydiv {
position: relative;
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
transform: rotate(45deg);
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: tomato; /* red */
}
#mydiv::before {
top: -50%;
}
#mydiv::after {
left: -50%;
}
</style>
<div id="mydiv"></div> 红影 发表于 2023-3-11 10:43
两只鸟儿嘴对嘴，衔起黑黑制作的代码心
俺一眼看成“黑黑的心”{:4_170:} 命运就是斗嘴{:4_189:} 绿叶清舟 发表于 2023-3-11 11:42
命运就是斗嘴
貌似如此 马黑黑 发表于 2023-3-11 10:45
这个创意咋样？
那个阴影也跟着动呢，有趣{:4_199:} 马黑黑 发表于 2023-3-11 10:54
就是一个矩形、两给圆形拼装起来的。三个东东宽高尺寸一样，圆形的一个上移、一个下移相等距离（最好是50 ...
对的，以前看的是这个，这个懂了。{:4_204:} 马黑黑 发表于 2023-3-11 10:55
俺一眼看成“黑黑的心”
那怎么行，黑黑的心怎么能被叼走{:4_189:} 红影 发表于 2023-3-11 15:31
那怎么行，黑黑的心怎么能被叼走
这么小的鸟也叼不走 红影 发表于 2023-3-11 15:25
对的，以前看的是这个，这个懂了。
{:4_190:} 红影 发表于 2023-3-11 15:23
那个阴影也跟着动呢，有趣
这回你又能看到阴影了？