遥远的歌曲
本帖最后由 马黑黑 于 2023-6-4 22:07 编辑 <br /><br /><style>#mydiv {
width: 600px;
min-height: 600px;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 0 8px 0 #000;
border-radius: 12px;
position: relative;
margin: 20px auto;
color: #002B64;
background: #eee;
font: normal 16px / 20px sans-serif;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
left: 10px; top: 10px; right: 10px; bottom: 10px;
border: 2px dotted teal;
border-radius: inherit;
}
#mydiv::after {
content: '遥远的歌曲';
left: -10px;
top: 20px;
padding: 10px 60px 15px 20px;
font: bold 20px / 26px sans-serif;
color: snow;
border-radius: 8px 0 0 10px;
background: #002B64;
opacity: .75;
clip-path: polygon(0 0, 100% 0, 95% 45%, 100% 90%, 10% 90%, 5% 100%, 0 100%);
}
</style>
<div id="mydiv">
<p><br><br><br><img src="https://638183.freep.cn/638183/t23/2/sea.gif" alt="" style="width: 100%" /><br><br></p>
<p>
遥远的歌曲来自海洋。<br><br>
海洋，是生命的摇篮，是一切生命的故乡。<br><br>
海纳何止百川？美的，丑的，善的，恶的，咸的，淡的，甜的，苦的……都在海洋里。海洋也是大自然的垃圾场。<br><br>
海洋摇荡的是美丽的歌谣，它可以美化一起，也可以丑化一切，同时，它总是很远很远……
</p>
<css-doodle grid="1" id="mplayer">
: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); } }
</css-doodle>
<p style="text-align: right"><br><br>图、曲 ：网络 </p>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1374372584" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
小帖子代码
<style>
#mydiv {
width: 600px;
min-height: 600px;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 0 8px 0 #000;
border-radius: 12px;
position: relative;
margin: 20px auto;
color: #002B64;
background: #eee;
font: normal 16px / 20px sans-serif;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
left: 10px; top: 10px; right: 10px; bottom: 10px;
border: 2px dotted teal;
border-radius: inherit;
}
#mydiv::after {
content: '遥远的歌曲';
left: -10px;
top: 20px;
padding: 10px 60px 15px 20px;
font: bold 20px / 26px sans-serif;
color: snow;
border-radius: 8px 0 0 10px;
background: #002B64;
opacity: .75;
clip-path: polygon(0 0, 100% 0, 95% 45%, 100% 90%, 10% 90%, 5% 100%, 0 100%);
}
</style>
<div id="mydiv">
<p><br><br><br><img src="https://638183.freep.cn/638183/t23/2/sea.gif" alt="" style="width: 100%" /><br><br></p>
<p>
遥远的歌曲来自海洋。<br><br>
海洋，是生命的摇篮，是一切生命的故乡。<br>
海纳何止百川？美的，丑的，善的，恶的，咸的，淡的，甜的，苦的……都在海洋里。海洋也是大自然的垃圾场。<br><br>
海洋摇荡的是美丽的歌谣，它可以美化一起，也可以丑化一切，同时，它总是很远很远……
</p>
<css-doodle grid="1" id="mplayer">
: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); } }
</css-doodle>
<p style="text-align: right"><br><br>图、曲 ：网络</p>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1374372584" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
简单大方，写文字好用{:4_187:} 南无月 发表于 2023-6-4 22:10
简单大方，写文字好用
CSS定型后，每一个选择器写成一行，代码就不会显得多了 正好今天也试了这个边框，对比一下才发现黑黑的这个更简洁。我的播放器是从播放器插件集合里找了个封装好的，代码一下多了好多{:4_173:} 红影 发表于 2023-6-4 22:25
正好今天也试了这个边框，对比一下才发现黑黑的这个更简洁。我的播放器是从播放器插件集合里找了个封装好的 ...
代码不论多与少吧，又不是不能播放{:4_170:} 帖子里的含义很好，“ 海洋摇荡的是美丽的歌谣，它可以美化一起，也可以丑化一切，同时，它总是很远很远……”看着这样的动图，感觉孕育了生命的海洋那么伟大{:4_187:} 红影 发表于 2023-6-4 22:27
帖子里的含义很好，“ 海洋摇荡的是美丽的歌谣，它可以美化一起，也可以丑化一切，同时，它总是很远很远… ...
{:4_181:} 好真实好真实的感动 小文 发表于 2023-6-4 22:34
好真实好真实的感动
{:4_180:} 马黑黑 发表于 2023-6-4 22:26
代码不论多与少吧，又不是不能播放
少的代码才更体现水平呢{:4_199:} 马黑黑 发表于 2023-6-4 22:29
这个主题必须点赞{:4_187:} 红影 发表于 2023-6-4 23:25
少的代码才更体现水平呢
代码多寡有时候与实现的功能有关 红影 发表于 2023-6-4 23:26
这个主题必须点赞
感谢管管大力支持 必须立马抄下来{:4_190:} 好看好听，感谢老师代码分享！{:4_190:} 马黑黑 发表于 2023-6-4 23:26
代码多寡有时候与实现的功能有关
实现相同功能的前提下，代码简洁的肯定更高明。 马黑黑 发表于 2023-6-4 23:27
感谢管管大力支持
咋这么称呼啊，感觉怪怪的{:4_172:} 醉美水芙蓉 发表于 2023-6-5 11:46
欣赏学习黑黑老师佳作！
谢谢