一花一世界（学习黑师《可能》css-doodle player效果）

位置: 首页 > 悄然作业[ 发布时间: 2023.5.13 作者: 花飞飞阅读: 372 ]

:doodle { @grid: 2 / 300px 60px; color: var(--color); bottom:40px; z-index: 100; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: LightSeaGreen; } /* 时间信息 : 左 */ @nth(1) { @place: 25% 80%; :after { content: var(--ttmsg1); } } /* 控制器 */ @nth(2) { @size: var(--size); @shape: windmill; @place: 50% 35%; background: var(--color); animation: rot 6s infinite linear var(--state); } /* 时间信息 : 右 */ @nth(3) { @place: 75% 80%; :after { content: var(--ttmsg2); } } /* 进度条 */ @nth(4) { @place: 50% 80%; @size: 100% 2px; background: #bbb; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: var(--color); } } @keyframes rot { to { transform: rotate(1turn); } }

:doodle { @size: auto 4em; bottom: 0; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: LightSeaGreen; /* 同步歌词颜色 */ overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); } @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } }

:doodle {@size: 1024px 640px;} @grid: 40x1 / 150vmin 90vmin; :container { perspective: 23vmin; }pointer-events: auto; background: @m( @r(140, 100), radial-gradient( @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%, transparent 50% ) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat ); @size: 30%; @place-cell: center; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 15s linear infinite var(--state); animation-delay: calc(@i * -.6s); @keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }

前一篇: 二龙戏珠（学习黑师《归来》变幻彩球效果）
下一篇: 如果（学习黑师《母亲》CSS-DOODLE加歌词效果）

发表评论:

评论列表 [4条]

#4 | 马黑于 2023-5-16 07:28 发布: 这么调整效果很不错了

#3 | 了了于 2023-5-13 11:16 发布: 都调到下面好了。这个贴子歌词也不合适放得太高。。

#2 | 马黑于 2023-5-13 10:49 发布: 播放器的位置似乎不怎么理想，其他都不错

#1 | 悄然于 2023-5-13 07:37 发布: 昨天做的发出来给黑黑看看，有大问题。。请移步日记有详细说明;))