簇拥烈日的花(学习黑师css-doodle粒子纷飞效果)

位置: 首页 > 悄然作业
[发布: 2023.5.16 作者: 花飞飞阅读: 285]

:doodle { @grid: 2 / 300px 60px; color: var(--color); bottom:40px; z-index: 100; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: Indigo; } /* 时间信息 : 左 */ @nth(1) { @place: 25% 80%; :after { content: var(--ttmsg1); } } /* 控制器 */ @nth(2) { @size: var(--size); clip-path: @shape( fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t); ); @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; top: 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: Teal; /* 同步歌词颜色 */ 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 {@grid: 16 / 1024px 640px;border: 1px solid tan;perspective: 800px;}:container {transform-style: preserve-3d;background: radial-gradient(circle,navy);}@size: @r(3,6)px;border-radius: 50%;@place: @r(660,340)px @r(660,120)px;background: rgba(@m3(@r(255)),@r(.6, .9));transform: rotate(@r(720)deg) translate3d(@r(500)px, @r(300)px, @r(1000)px);animation: fly @r(20,40)s @r(-20,0)s infinite linear;@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }

前一篇: 雨中荷塘（学习黑师《夜雨》CSS-DOODLE雨丝&歌词效果）
下一篇: 橘子洲头（学习黑师汉字逐渐显示效果）

发表评论:

评论列表 [2条]

#2 | 悄然于 2023-5-17 13:53 发布: 没过两天呢，就比四爷还老了

#1 | 八爷于 2023-5-17 13:19 发布: 非常漂亮