爱的命运

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: lightblue url('https://638183.freep.cn/638183/t23/1/destiny.jpg') center/cover no-repeat;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         z-index: 1;
   
10. }
    
11. #mplayer {
    
12.         position: absolute;
    
13.         top: 22.7%; /*145px;*/
    
14.         left: 52.5%; /*538px;*/
    
15.         width: 80px;
    
16.         height: 80px;
    
17.         background: #E94142;
    
18.         transform: rotate(135deg);
    
19.         opacity: .8;
    
20.         filter: drop-shadow(260px -280px 20px #000);
    
21.         animation: beat .45s infinite alternate var(--state);
    
22.         cursor: pointer;
    
23.         --state: paused;
    
24. }
    
25. #mplayer::before, #mplayer::after {
    
26.         position: absolute;
    
27.         content: '';
    
28.         width: 100%;
    
29.         height: 100%;
    
30.         border-radius: 50%;
    
31.         background: inherit;
    
32. }
    
33. #mplayer::before { top: -50px; }
    
34. #mplayer::after { left: 50px; }
    
35. #mplayer:hover { background: red; }
    
36. @keyframes beat { to { transform: rotate(135deg) scale(0.9); } }
    
37. </style>
    
38. 
    
39. <div id="papa">
    
40.         <div id="mplayer"></div>
    
41.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=541230" autoplay loop></audio>
    
42. </div>
    
43. 
    
44. <script>
    
45. (function() {
    
46.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
47.         aud.addEventListener('play', () => mState());
    
48.         aud.addEventListener('pause', () => mState());
    
49.         mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
50. })();
    
51. </script>

复制代码

马黑黑

帖子实现机制的简单解释：

帖子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
真漂亮！

一班一班，也许是二班

马黑黑

阿狄丽娜 发表于 2023-3-11 08:34
感谢黑哥的分享！

红影

用代码画心形记得以前看懂了，现在怎么又有点迷糊了

红影

两只鸟儿嘴对嘴，衔起黑黑制作的代码心

马黑黑

红影 发表于 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
两只鸟儿嘴对嘴，衔起黑黑制作的代码心

俺一眼看成“黑黑的心”

绿叶清舟

命运就是斗嘴

马黑黑

绿叶清舟 发表于 2023-3-11 11:42
命运就是斗嘴

貌似如此

红影

马黑黑 发表于 2023-3-11 10:45
这个创意咋样？

那个阴影也跟着动呢，有趣

红影

马黑黑 发表于 2023-3-11 10:54
就是一个矩形、两给圆形拼装起来的。三个东东宽高尺寸一样，圆形的一个上移、一个下移相等距离（最好是50 ...

对的，以前看的是这个，这个懂了。

红影

马黑黑 发表于 2023-3-11 10:55
俺一眼看成“黑黑的心”

那怎么行，黑黑的心怎么能被叼走

马黑黑

红影 发表于 2023-3-11 15:31
那怎么行，黑黑的心怎么能被叼走

这么小的鸟也叼不走

马黑黑

红影 发表于 2023-3-11 15:25
对的，以前看的是这个，这个懂了。

马黑黑

红影 发表于 2023-3-11 15:23
那个阴影也跟着动呢，有趣

这回你又能看到阴影了？