彼岸花

马黑黑 · 发表于 2023-4-19 13:32

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

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

x

@grid: 1 / 120px; cursor: pointer; background: radial-gradient(yellow, #E91F63, #fff); clip-path: @shape( fill-rule: evenodd; split: 500; scale: .6; r: cos(7t)^2 + sin(7t) + .3;); animation: rot 6s infinite linear var(--state); @keyframes rot { to { transform: rotate(360deg); } }

山人 · 发表于 2023-4-19 13:35

播放器样式使用 css-doodle 官网的一个图形案例

山人 · 发表于 2023-4-19 13:36

帖子

<style>
#papa {
margin: 20px auto;
width: 652px;
height: 500px;
background: tan url('./web/pic/webp/audd.webp') center/cover no-repeat;
box-shadow: 0 0 10px gray;
display: grid;
place-items: center;
}
</style>
<div id="papa">
<css-doodle id="mplayer">
@grid: 1 / 120px;
cursor: pointer;
background: radial-gradient(yellow, #E91F63, #fff);
clip-path: @shape( fill-rule: evenodd; split: 500; scale: .6; r: cos(7t)^2 + sin(7t) + .3;);
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=532931" autoplay loop></audio>
<script>
(function() {
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);
let mState = () => papa.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-4-19 17:55

css-doodle 论坛测试成功

花飞飞 · 发表于 2023-4-19 17:57

可以喝一杯

马黑黑 · 发表于 2023-4-19 18:03

花飞飞发表于 2023-4-19 17:55
css-doodle 论坛测试成功

马黑黑 · 发表于 2023-4-19 18:03

花飞飞发表于 2023-4-19 17:57
可以喝一杯

喝高了

花飞飞 · 发表于 2023-4-19 18:03

马黑黑发表于 2023-4-19 18:03

怎么祝贺一下呢

花飞飞 · 发表于 2023-4-19 18:04

马黑黑发表于 2023-4-19 18:03

我们外行人看着从不能发到能发，挺不容易的。

花飞飞 · 发表于 2023-4-19 18:04

马黑黑发表于 2023-4-19 18:03
喝高了

值得的，继续。。。。

花飞飞 · 发表于 2023-4-19 18:04

马黑黑发表于 2023-4-19 18:03
喝高了

先撤了哈。。。。再聊

马黑黑 · 发表于 2023-4-19 18:05

花飞飞发表于 2023-4-19 18:04
先撤了哈。。。。再聊

马黑黑 · 发表于 2023-4-19 18:05

花飞飞发表于 2023-4-19 18:04
值得的，继续。。。。

显示全部楼层 · 发表于 2023-4-19 19:49

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

梦缘 · 发表于 2023-4-19 19:50

欣赏问好，感谢分享！

显示全部楼层 · 发表于 2023-4-19 19:51

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

显示全部楼层 · 发表于 2023-4-19 19:54

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

千羽 · 发表于 2023-4-19 20:35

这个花花播放器挺漂亮

马黑黑 · 发表于 2023-4-19 20:56

千羽发表于 2023-4-19 20:35
这个花花播放器挺漂亮

挺好看的

梦油 · 发表于 2023-4-19 21:12

你设计的播放器不断创新啊。

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

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

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

[灌水] 彼岸花

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

评分

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

流光溢彩

优雅神秘

花潮贵宾

蝴蝶情怀

心香一瓣

金剪刀

缤纷心情

天长地久

梦幻浪漫

指尖上的流年

心曲飞扬

七彩绚丽

妙笔生花

前途似锦