遥远的歌曲

马黑黑

遥远的歌曲来自海洋。

海洋，是生命的摇篮，是一切生命的故乡。

海纳何止百川？美的，丑的，善的，恶的，咸的，淡的，甜的，苦的……都在海洋里。海洋也是大自然的垃圾场。

海洋摇荡的是美丽的歌谣，它可以美化一起，也可以丑化一切，同时，它总是很远很远……

:doodle { @size: 50px; margin: 20px auto; cursor: pointer; --state: paused; } background: #002B64; @shape: clover 4; animation: rot 6s infinite linear var(--state); @keyframes rot { to { transform: rotate(360deg); } }

图、曲 ：网络  

马黑黑

小帖子代码

1. <style>
   
2. #mydiv {
   
3.         width: 600px;
   
4.         min-height: 600px;
   
5.         padding: 20px;
   
6.         box-sizing: border-box;
   
7.         box-shadow: 0 0 8px 0 #000;
   
8.         border-radius: 12px;
   
9.         position: relative;
   
10.         margin: 20px auto;
    
11.         color: #002B64;
    
12.         background: #eee;
    
13.         font: normal 16px / 20px sans-serif;
    
14. }
    
15. #mydiv::before, #mydiv::after {
    
16.         position: absolute;
    
17.         content: '';
    
18. }
    
19. #mydiv::before {
    
20.         left: 10px; top: 10px; right: 10px; bottom: 10px;
    
21.         border: 2px dotted teal;
    
22.         border-radius: inherit;
    
23. }
    
24. #mydiv::after {
    
25.         content: '遥远的歌曲';
    
26.         left: -10px;
    
27.         top: 20px;
    
28.         padding: 10px 60px 15px 20px;
    
29.         font: bold 20px / 26px sans-serif;
    
30.         color: snow;
    
31.         border-radius: 8px 0 0 10px;
    
32.         background: #002B64;
    
33.         opacity: .75;
    
34.         clip-path: polygon(0 0, 100% 0, 95% 45%, 100% 90%, 10% 90%, 5% 100%, 0 100%);
    
35. }
    
36. 
    
37. </style>
    
38. 
    
39. <div id="mydiv">
    
40.         <p><br><br><br><img src="https://638183.freep.cn/638183/t23/2/sea.gif" alt="" style="width: 100%" /><br><br></p>
    
41.         <p>
    
42.                 遥远的歌曲来自海洋。<br><br>
    
43.                 海洋，是生命的摇篮，是一切生命的故乡。<br>
    
44.                 海纳何止百川？美的，丑的，善的，恶的，咸的，淡的，甜的，苦的……都在海洋里。海洋也是大自然的垃圾场。<br><br>
    
45.                 海洋摇荡的是美丽的歌谣，它可以美化一起，也可以丑化一切，同时，它总是很远很远……
    
46.         </p>
    
47.                 <css-doodle grid="1" id="mplayer">
    
48.                 :doodle {
    
49.                         @size: 50px;
    
50.                         margin: 20px auto;
    
51.                         cursor: pointer;
    
52.                         --state: paused;
    
53.                 }
    
54.                 background: #002B64;
    
55.                 @shape: clover 4;
    
56.                 animation: rot 6s infinite linear var(--state);
    
57.                 @keyframes rot { to { transform: rotate(360deg); } }
    
58.         </css-doodle>
    
59.         <p style="text-align: right"><br><br>图、曲 ：网络  </p>
    
60.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1374372584" autoplay="autoplay" loop="loop"></audio>
    
61. </div>
    
62. 
    
63. <script>
    
64. (function() {
    
65.         let script = document.createElement('script');
    
66.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    
67.         document.head.appendChild(script);
    
68.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
69.         aud.addEventListener('play', mState, false);
    
70.         aud.addEventListener('pause', mState, false);
    
71.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
72. })();
    
73. </script>

复制代码

南无月

简单大方，写文字好用

马黑黑

南无月 发表于 2023-6-4 22:10
简单大方，写文字好用

CSS定型后，每一个选择器写成一行，代码就不会显得多了

红影

正好今天也试了这个边框，对比一下才发现黑黑的这个更简洁。我的播放器是从播放器插件集合里找了个封装好的，代码一下多了好多

马黑黑

红影 发表于 2023-6-4 22:25
正好今天也试了这个边框，对比一下才发现黑黑的这个更简洁。我的播放器是从播放器插件集合里找了个封装好的 ...

代码不论多与少吧，又不是不能播放

红影

帖子里的含义很好，“ 海洋摇荡的是美丽的歌谣，它可以美化一起，也可以丑化一切，同时，它总是很远很远……”看着这样的动图，感觉孕育了生命的海洋那么伟大

马黑黑

红影 发表于 2023-6-4 22:27
帖子里的含义很好，“ 海洋摇荡的是美丽的歌谣，它可以美化一起，也可以丑化一切，同时，它总是很远很远… ...

小文

好真实好真实的感动

马黑黑

小文 发表于 2023-6-4 22:34
好真实好真实的感动

红影

马黑黑 发表于 2023-6-4 22:26
代码不论多与少吧，又不是不能播放

少的代码才更体现水平呢

红影

马黑黑 发表于 2023-6-4 22:29

这个主题必须点赞

马黑黑

红影 发表于 2023-6-4 23:25
少的代码才更体现水平呢

代码多寡有时候与实现的功能有关

马黑黑

红影 发表于 2023-6-4 23:26
这个主题必须点赞

感谢管管大力支持

樵歌

必须立马抄下来

梦缘

好看好听，感谢老师代码分享！

红影

马黑黑 发表于 2023-6-4 23:26
代码多寡有时候与实现的功能有关

实现相同功能的前提下，代码简洁的肯定更高明。

红影

马黑黑 发表于 2023-6-4 23:27
感谢管管大力支持

咋这么称呼啊，感觉怪怪的

马黑黑

醉美水芙蓉 发表于 2023-6-5 11:46
欣赏学习黑黑老师佳作！

谢谢