我一直在你身旁从未走远（贺司敏儿生日）
位置:
首页 >
悄然作业[发布: 2024.6.30 作者: 花飞飞 阅读: 176]
:doodle { @size: 260px; cursor: pointer; right: 470px; top: 1300px; opacity: .96;z-index: 4; }clip-path: @shape(frame: 4;points: 40;x: cos(12t)^1 * cos(15t);y: cos(12t)^1 * sin(15t););background: linear-gradient(HotPink,LavenderBlush,Snow);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }
:doodle { @size: 1200px 1700px; margin: 20px auto; }@size: 120px;position: absolute;background: linear-gradient(Snow,HotPink,LavenderBlush);clip-path: @shape(frame: 4;points: 40;x: cos(12t)^1 * cos(15t);y: cos(12t)^1 * sin(15t););border-radius: 50%;cursor: pointer;offset-path: path('M900 900 A100 100 0 1 0 300 900');offset-distance: calc((@i - 1) * 20%);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }
:doodle { @size: auto 4em; z-index:5; bottom: 60px; left: 50%; transform: translate(-50%); --geci: " css-doodle player"; --motion: cover2; --tt: 1s; }display: grid;place-items: center start;:before, :after {content: var(--geci);color: Pink;font: bold 2em sans-serif;text-shadow: 1px 1px 2px #000;white-space: pre;}:after {position: absolute;width: 0;color:LavenderBlush;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%; } }
司敏儿生日快乐！
前一篇: 金钱财宝（修改JS为竖版歌词同步尝试）
下一篇: 赤壁怀古（学习黑师20240701《西亚风光》米字形圆环小播效果）
发表评论:
评论列表 [1条]
#1 | 马黑 于 2024-7-1 19:11 发布: 这个用css-doodle做的，漂酿
