橘子洲头（学习黑师汉字逐渐显示效果）

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

:doodle {@size: 100px; cursor: pointer; left:150px; top: 50px; z-index: 4; clip-path: @shape(fill: evenodd;points: 600;scale: .13;x: 6 * cos(t) + cos(12t);y: 6 * sin(t) - sin(12t););background: url('https://pic2.imgdb.cn/item/6464c4ed0d2dde5777ca602a.gif') no-repeat center / cover; pointer-events: auto; animation: rot 6s infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } }

:doodle {@size: 240px 300px;left: 120px;top: 200px;cursor: pointer;z-index: 3;}@size: 50px;@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);font: normal 30px / 40px sans-serif;color:yellow;text-shadow: 1px 1px 2px #000;opacity: 0;:before {content: @pn([独立寒秋，湘江北去，橘子洲头。看万山红遍，层林尽染；漫江碧透，百舸争流……]);}animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state);@keyframes show { to { opacity: 1; } }

:doodle { @size: 1024px 640px; perspective: 300px; }:container { transform-style: preserve-3d; }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%;animation: scale-up 15s calc(@i * -.6s) linear infinite var(--state);@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粒子纷飞效果)
下一篇: 落花影中游(学习黑师《火》双背景效果）

发表评论:

评论列表 [3条]

#3 | 悄然于 2023-5-17 19:32 发布: 辛苦啦！我瞧瞧怎么整。。。

#2 | 八爷于 2023-5-17 19:25 发布: 代码已发出

#1 | 飞飞于 2023-5-17 13:56 发布: 问题贴，各种不受控。鼠标小手也不出现，播放器点了也不停，粒子也无法控制。彻底失控状态。。晕晕，改不出来了，黑老师给瞧瞧