Life in Full Bloom
<style>#mydiv {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/1/r1.jpg') no-repeat center/cover;
position: relative;
box-shadow: 0 0 8px #000;
z-index: 1;
}
</style>
<div id="mydiv">
<css-doodle grid="1" id="mplayer">
:doodle {
@size: 200px;
@shape: circle;
background: pink url('https://638183.freep.cn/638183/t23/1/5191s.jpg') no-repeat center/cover;
mix-blend-mode: screen;
position: absolute;
left: 20px;
top: 20px;
--state: paused;
}
@size: 80px;
@place: 50%;
background: conic-gradient(red, yellow, orange, green, cyan, blue, purple);
border-radius: 50%;
box-shadow: 0 0 8px #333;
cursor: pointer;
:hover { box-shadow: 0 0 28px red; }
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=491979571" autoplay loop></audio>
</div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.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>
.chj_code {
position: relative;
margin: 10px 0 10px 60px;
border-left: 2px solid tan;
font: normal 16px/20px Consolas, Monaco, monospace;
}
.chj_code > p {
margin: 3px 0 3px 10px;
position: relative;
white-space: pre-wrap;
tab-size: 4;
}
.chj_code > p::before {
position: absolute;
width: 40px;
left: -55px;
content: attr(data-line);
text-align: right;
color: #ccc;
}
</style>
<p>帖子本地初始代码：<br></p>
<div class="chj_code">
<p><style></p>
<p>#mydiv {</p>
<p> margin: 20px auto;</p>
<p> width: 1024px;</p>
<p> height: 640px;</p>
<p> background: lightblue url('../pic/r1.jpg') no-repeat center/cover;</p>
<p> position: relative;</p>
<p> box-shadow: 0 0 8px #000;</p>
<p> z-index: 1;</p>
<p>}</p>
<p></style></p>
<p></p>
<p><div id="mydiv"></p>
<p> <css-doodle grid="1" id="mplayer"></p>
<p> :doodle {</p>
<p> @size: 200px;</p>
<p> @shape: circle;</p>
<p> background: pink url('../pic/5191s.jpg') no-repeat center/cover;</p>
<p> mix-blend-mode: screen;</p>
<p> position: absolute;</p>
<p> left: 20px;</p>
<p> top: 20px;</p>
<p> --state: paused;</p>
<p> }</p>
<p> @size: 80px;</p>
<p> @place: 50%;</p>
<p> background: conic-gradient(red, yellow, orange, green, cyan, blue, purple);</p>
<p> border-radius: 50%;</p>
<p> box-shadow: 0 0 8px #333;</p>
<p> cursor: pointer;</p>
<p> :hover { box-shadow: 0 0 28px red; }</p>
<p> animation: rot 6s infinite linear var(--state);</p>
<p> @keyframes rot { to { transform: rotate(360deg); } }</p>
<p> </css-doodle></p>
<p> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=491979571" autoplay loop></audio></p>
<p></div></p>
<p></p>
<p><script></p>
<p>(function() {</p>
<p> let script = document.createElement('script');</p>
<p> script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';</p>
<p> document.head.appendChild(script);</p>
<p> let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');</p>
<p> aud.addEventListener('play', mState, false);</p>
<p> aud.addEventListener('pause', mState, false);</p>
<p> mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();</p>
<p>})();</p>
<p></script></p>
</div>
<script>
(function setLineNum() {
let code_papas = document.querySelectorAll('.chj_code');
Array.from(code_papas).forEach( (item,key) => {
let pps = item.children;
Array.from(pps).forEach( (p,pkey) => {
p.setAttribute('data-line', pkey + 1);
});
});
})();
</script> 帖子布局 ：一个带背景图片的父div + css-doodle播放器。
其中，css-doodle播放器是只有一个单元格的css-doodle图案，doodle主体自带背景图片，单元格用角向渐变背景做成七彩光盘模样并作为音频控制器使用。 要使用css-doodle，需清楚它的代码结构，详情请查阅几个css-doodle入门帖子，或访问css-doodle官网 <css-doodle /> 。通常，css-doodle 的代码书写方式，是把它当做 HTML 标签（和<div>、<p>、<audio> 等一样性质的标签）写在网页的 HTML 代码内，即 <body> 和 </body> 之间合适的地方；不同于其他常规HTML标签的是，css-doodle是一个伪装的标签，它里面的描述语句除了自身的特定语句，还直接支持原生CSS语句。
ps ：css-doodle 代码层含义：
<css-doodle>
:doodle {
/* 这里是css-doodle图案的主体代码，即图案父元素的代码 例如：*/
@grid: 2 / 400px; /* 图案为 2*2网格、 400*400px的尺寸*/
@shape: circle; /* 圆形外观 */
background: tan; /* 团背景色 - 这句是原生CSS语句 */
}
/* 这里开始，是基于单元格代码，同样接受原生CSS语句，CSS语句有一些也可以作用于主体（如关键帧动画主体也可以调用） */
@shape: clover 4;
background: red;
</css-doodle>
好听的曲，感谢老师的代码分享！{:4_187:} 梦缘 发表于 2023-5-4 20:24
好听的曲，感谢老师的代码分享！
晚上嚎 原来外围的图案是图片，以为也是css-doodle做出来的呢。里面的七彩光盘黑黑用纯css也做过的呢{:4_204:} 这个背景很清晰，播放器也极漂亮。欣赏黑黑好帖{:4_187:} 红影 发表于 2023-5-5 09:53
这个背景很清晰，播放器也极漂亮。欣赏黑黑好帖
感谢支持 红影 发表于 2023-5-5 09:53
原来外围的图案是图片，以为也是css-doodle做出来的呢。里面的七彩光盘黑黑用纯css也做过的呢
这里试一下css-doodle，它实际上也是用CSS做的，它就是基于CSS的 马黑黑 发表于 2023-5-5 19:38
感谢支持
刚发现，我把清新打成了清晰{:4_173:} 马黑黑 发表于 2023-5-5 19:38
这里试一下css-doodle，它实际上也是用CSS做的，它就是基于CSS的
嗯嗯，套在css-doodle的css{:4_204:} 红影 发表于 2023-5-5 20:04
嗯嗯，套在css-doodle的css
差不多 红影 发表于 2023-5-5 20:02
刚发现，我把清新打成了清晰
一样一样的 醉美水芙蓉 发表于 2023-5-5 21:09
黑黑老师配音配图漂亮！
晚上好 马黑黑 发表于 2023-5-5 20:40
差不多
这个不那么复杂还算好，能看得懂，你今天的那个房前就太复杂了点{:4_173:} 马黑黑 发表于 2023-5-5 20:40
一样一样的
怎么可能一样呢{:4_173:} 红影 发表于 2023-5-5 21:31
怎么可能一样呢
反正也差不了多少的 红影 发表于 2023-5-5 21:31
这个不那么复杂还算好，能看得懂，你今天的那个房前就太复杂了点
那个，随机选择器，伪元素，背景套用css-doodle，所以显得复杂