Life in Full Bloom

马黑黑 · 发表于 2023-5-4 08:05

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

: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); } }

马黑黑 · 发表于 2023-5-4 08:07

帖子本地初始代码：

<style>

#mydiv {

margin: 20px auto;

width: 1024px;

height: 640px;

background: lightblue url('../pic/r1.jpg') no-repeat center/cover;

position: relative;

box-shadow: 0 0 8px #000;

z-index: 1;

}

</style>

<css-doodle grid="1" id="mplayer">

:doodle {

@size: 200px;

@shape: circle;

background: pink url('../pic/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>

</div>

(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>

马黑黑 · 发表于 2023-5-4 08:12

帖子布局：一个带背景图片的父div + css-doodle播放器。

其中，css-doodle播放器是只有一个单元格的css-doodle图案，doodle主体自带背景图片，单元格用角向渐变背景做成七彩光盘模样并作为音频控制器使用。

马黑黑 · 发表于 2023-5-4 08:37

要使用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>

梦缘 · 发表于 2023-5-4 20:24

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

马黑黑 · 发表于 2023-5-4 20:25

梦缘发表于 2023-5-4 20:24
好听的曲，感谢老师的代码分享！

晚上嚎

红影 · 发表于 2023-5-5 09:53

原来外围的图案是图片，以为也是css-doodle做出来的呢。里面的七彩光盘黑黑用纯css也做过的呢

红影 · 发表于 2023-5-5 09:53

这个背景很清晰，播放器也极漂亮。欣赏黑黑好帖

马黑黑 · 发表于 2023-5-5 19:38

红影发表于 2023-5-5 09:53
这个背景很清晰，播放器也极漂亮。欣赏黑黑好帖

感谢支持

马黑黑 · 发表于 2023-5-5 19:38

红影发表于 2023-5-5 09:53
原来外围的图案是图片，以为也是css-doodle做出来的呢。里面的七彩光盘黑黑用纯css也做过的呢

这里试一下css-doodle，它实际上也是用CSS做的，它就是基于CSS的

红影 · 发表于 2023-5-5 20:02

马黑黑发表于 2023-5-5 19:38
感谢支持

刚发现，我把清新打成了清晰

红影 · 发表于 2023-5-5 20:04

马黑黑发表于 2023-5-5 19:38
这里试一下css-doodle，它实际上也是用CSS做的，它就是基于CSS的

嗯嗯，套在css-doodle的css

马黑黑 · 发表于 2023-5-5 20:40

红影发表于 2023-5-5 20:04
嗯嗯，套在css-doodle的css

差不多

马黑黑 · 发表于 2023-5-5 20:40

红影发表于 2023-5-5 20:02
刚发现，我把清新打成了清晰

一样一样的

显示全部楼层 · 发表于 2023-5-5 21:09

提示: 作者被禁止或删除内容自动屏蔽

马黑黑 · 发表于 2023-5-5 21:11

醉美水芙蓉发表于 2023-5-5 21:09
黑黑老师配音配图漂亮！

晚上好

红影 · 发表于 2023-5-5 21:31

马黑黑发表于 2023-5-5 20:40
差不多

这个不那么复杂还算好，能看得懂，你今天的那个房前就太复杂了点

红影 · 发表于 2023-5-5 21:31

马黑黑发表于 2023-5-5 20:40
一样一样的

怎么可能一样呢

马黑黑 · 发表于 2023-5-5 21:34

红影发表于 2023-5-5 21:31
怎么可能一样呢

反正也差不了多少的

马黑黑 · 发表于 2023-5-5 21:35

红影发表于 2023-5-5 21:31
这个不那么复杂还算好，能看得懂，你今天的那个房前就太复杂了点

那个，随机选择器，伪元素，背景套用css-doodle，所以显得复杂

醉美水芙蓉该用户已被删除	发表于 2023-5-5 21:09 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

Life in Full Bloom

请马上登录，朋友们都在花潮里等着你哦：）

评分

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

蝴蝶情怀

心香一瓣

金剪刀

缤纷心情

草莓情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

一往情深

妙笔生花

天长地久

绚丽缤纷

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节