帽子边缘的蝴蝶（学习黑师路径作业之自由乱飞）
位置:
首页 >
悄然作业[ 发布时间: 2023.6.24 作者: 花飞飞 阅读: 200 ]
:doodle { @size: 1024px 768px; background: url('https://s1.ax1x.com/2023/06/24/pCtXsTP.jpg'); box-shadow: 0 0 8px #000; position: relative; margin: 0px auto; --geci: 'HUACHAO'; --motion: cover2; --ww: 300px; --prog: 0; --tt: 1s; --tt1: '00:00'; --tt2: '00:00'; --xplace: 50%; --yplace: 95%; --color: orange; --state: paused;}@nth(1) { @size: auto 3em; @place: 50% 5%; transform: translate(-50%); 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: orange; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }}@nth(2) { @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: 100%; height: 10px; cursor: pointer; }}@nth(3) { @size: 60px; @place: var(--xplace) calc(var(--yplace) - 36px); cursor: pointer; animation: rot 6s infinite linear var(--state); :after { content: ''; @size: inherit; @shape: clover 4; background: var(--color); }}@nth(4) { @size: var(--ww) 20px; @place: var(--xplace) calc(var(--yplace) - 20px); :before, :after { position: absolute; width: 100%; height: 100%; color: var(--color); } :before { content: var(--tt1); } :after { content: var(--tt2); text-align: right; }}@nth(5) { @size: 200px 113px; background: url('https://638183.freep.cn/638183/Pic/2022/btf.gif'); offset-path: path('m213.5,575.6l-20.5,2.4l-25,4l-39,1l-22,-7l-18,-8l-11,-14l-7,-18c0.5,0.6 -3.5,-20.4 -3.5,-22.4c0,-2 -1,-24 0,-27c1,-3 9,-23 8.5,-23.6c0.5,0.6 15.5,-19.4 15,-20c0.5,0.6 16.5,-16.4 16,-17c0.5,0.6 15.5,-10.4 15,-11c0.5,0.6 16.5,-12.4 16,-13c0.5,0.6 31.5,0.6 31,0c0.5,0.6 15.5,0.6 16.5,0.6c1,0 31,0 30.5,-0.6c0.5,0.6 35.5,7.6 35,7c0.5,0.6 47.5,12.6 47,12c0.5,0.6 30.5,0.6 30,0c0.5,0.6 20.5,-0.4 20,-1c0.5,0.6 33.5,-10.4 33,-11c0.5,0.6 31.5,-10.4 31,-11c0.5,0.6 15.5,-21.4 15,-22c0.5,0.6 23.5,-8.4 23,-9c0.5,0.6 16.5,-16.4 16.5,-18.4c0,-2 8,-24 8,-24c0,0 15,-15 17,-16c2,-1 14,-16 15,-18c1,-2 11,-20 13,-22c2,-2 13,-15 16,-17c3,-2 22,-30 21.5,-30.6c0.5,0.6 21.5,-12.4 21,-13c0.5,0.6 18.5,-19.4 19.5,-19.4c1,0 19,-11 18.5,-11.6c0.5,0.6 16.5,-9.4 16,-10c0.5,0.6 26.5,-2.4 26.5,-2.4c0,0 12,-2 11.5,-2.6c0.5,0.6 15.5,3.6 15,3c0.5,0.6 11.5,10.6 11,10c0.5,0.6 7.5,20.6 7,20c0.5,0.6 0.5,25.6 0,25c0.5,0.6 -8.5,36.6 -9,36c0.5,0.6 -11.5,36.6 -12,36c0.5,0.6 -23.5,24.6 -24,24c0.5,0.6 -24.5,25.6 -25.5,25.6c-1,0 -37,11 -37.5,10.4c0.5,0.6 -30.5,11.6 -31,11c0.5,0.6 -27.5,5.6 -32.5,7.6c-5,2 -38,11 -39,11c-1,0 -22,3 -22.5,2.4c0.5,0.6 -9.5,3.6 -10,3'); offset-distance: 0%; animation: fly 40s infinite alternate var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; }}@keyframes cover2 { from { width: 0; } to { width: 100%; }}@keyframes rot { to { transform: rotate(360deg); }}@keyframes fly { to { offset-distance: 100%; }}
前一篇: 星辰大海（学习黑师路径作业之五）
下一篇: 湾区升明月专辑（学习黑师巫娜——茶道专辑效果）
发表评论:
评论列表 [3条]
#3 | 悄然 于 2023-6-25 17:52 发布: 整精准点的，得花时间。。。。
#2 | 八爷 于 2023-6-25 10:17 发布: 蝴蝶飞行的路线就是大概的
#1 | 悄然 于 2023-6-24 21:53 发布: 设计是按帽沿飞，但蝴蝶乱动总感觉不是特别精准，大概意思是有了，哈哈。。。
