走在阳光里（学习黑师《鹰》贴子效果）

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

:doodle {@size: 100%;box-shadow: 20px auto;--ww: 300px;--prog: 0;--tt1: '00:00';--tt2: '00:00';--xplace: 65%;--yplace: 95%;--color: Coral;}position: absolute;@nth(1) {@size: var(--ww) 2px;@place: var(--xplace) var(--yplace);background: silver;:before, :after { content: ''; }:before {position: absolute;left: 0;width: var(--prog);height: 100%;background: var(--color);}:after {width: 80%;height: 10px;cursor: pointer;}}@nth(2) {@size: var(--ww) 20px;@place: var(--xplace) calc(var(--yplace) - 20px);:before, :after{position: absolute;width: 80%;height: 100%;color: var(--color);}:before { content: var(--tt1); }:after {content: var(--tt2);text-align: right;}}@nth(3) {@size: 60px;@place: var(--xplace) calc(var(--yplace) - 36px);cursor: pointer;animation: rot 6s infinite linear var(--state);:after {content: '';@size: inherit;clip-path: @shape(fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(π - 7t);y: sin(2t) + sin(7t););background: var(--color);}}@match(i ≥ 4) {@size: 300px 300px;@place: 520px 304px;background: url('https://img.soogif.com/eec7c8e4bca44deba45771d76e759ef0.gif');offset-path: path('M80 100 a240 160 0 1 0 480 0 a240 160 0 1 0 -480 0z');animation: fly 18s calc((@size - @i) * -6.5s) infinite linear var(--state);}@keyframes rot { to { transform: rotate(360deg); } }@keyframes fly { to { offset-distance: 100%; }}

:doodle {@size: auto 3em;left: 50%;top: 2%;transform: translate(-50%);--geci: 'HUACHAO';--motion: cover2;--tt: 1s;}display: grid;place-items: center start;:before, :after {content: var(--geci);width: fit-content;height: fit-content;font: bold 2em Sans-serif;color: #ccc;text-shadow: 1px 1px 2px #000;white-space: pre;}:after {position: absolute;white-space: pre;width: 0;color: SeaGreen;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%; } }

前一篇: 四季予你（学习黑师教程路径练习作业之三）
下一篇: 工业风代码

发表评论:

评论列表 [7条] 全部评论

#7 | 悄然于 2023-6-11 12:40 发布: 好的，看到你把词调到上方了。歌词大小改成了2..。。歪头看看，好象大点是好看点。。

#6 | 马黑于 2023-6-11 09:55 发布: 本帖原稿，歌词与播放器爱得太近，进度条操作空间被挤占

#5 | 飞飞于 2023-6-11 08:02 发布: 好哒，你慢慢调。。。

#4 | 马黑于 2023-6-11 07:56 发布: 还在调整中哦……

#3 | 悄然于 2023-6-11 07:54 发布: 哈哈，可以了。。。你厉害，五体投地服一个。。^-^

#2 | 马黑于 2023-6-10 23:57 发布: 代码没有问题。与整站程序的什么东东有冲突或不兼容，明天升级整站系统看看。