童年的歌谣（学习黑师汉字逐渐下落效果）

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

:doodle { @size: 60px; cursor: pointer; left: 480px; bottom: 290px; z-index: 4; }clip-path: @shape(fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t););background: MediumPurple;animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); }}

:doodle { @size: 650px 600px; top:100px;}@size: 120px;@shape: circle;background: linear-gradient(to bottom,#9370DB 0%,#e9dfd1 100%);font: normal 30px / 30px sans-serif;:after { content: @pn([童年的歌谣]); font-family: '楷体', '黑体', sans-serif; font-size: 6rem; color: #2F4F4F; text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff; font-weight: 900; letter-spacing: -2px; }animation: fall 1s calc((@i - 1) * 1s) linear forwards var(--state);@keyframes fall {from { transform: translateY(0); }to { transform: translateY(360px); }}

:doodle {@grid: 16 / 1024px 640px;perspective: 800px;}:container {transform-style: preserve-3d;}@size: @r(3,6)px;border-radius: 50%;@place: center center;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 var(--state);@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }

前一篇: 落花影中游(学习黑师《火》双背景效果）
下一篇: 一天到晚游泳的鱼css-doodle版（学习黑师海底世界路径效果）

发表评论:

评论列表 [6条]

#6 | 悄然于 2023-5-20 12:06 发布: 哈哈，又抄你一贴

#5 | 八爷于 2023-5-20 12:01 发布: 终稿很完美

#4 | 飞于 2023-5-20 08:42 发布: 天，改了半天歌没换。。等会整了

#3 | 悄然于 2023-5-19 17:42 发布: 现在终于摸到电脑，这就去改看看

#2 | 马黑于 2023-5-19 07:31 发布: 把伪元素 :after {} 里的 background: linear-gradient(to bottom, 井ece4d9 0%,井e9dfd1 100%); 搬到上方，替换掉 background: green; 即可

#1 | 飞飞于 2023-5-18 23:16 发布: 字本身复制过来的的背景成了一小条，不听使唤。。灌水回来看还是这样。。