请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
思路:每一个单元格装载一个字,让它们依次排列,排列算法要考虑到诗行。各单元格开始时全透明,通过关键帧动画逐一显现,涉及到的算法在 css-doodle 里是简单的。以下是代码,我们给 :doodle{} 选择器嵌套了一个 css-doodle 背景。逐字显示的代码在 16 到 26 行之间:
<css-doodle grid="6x4" click-to-update>
:doodle {
@size: 600px 400px;
background: @doodle(
@grid: 1 / 100%;
background: gray;
clip-path: @shape(
points: 1000;
scale: .8;
move: .5 .64;
x: cos(t^t) + cos(1.8^t);
y: sin(t) + sin(2.305t)*sin(t);
);
);
}
@size: 40px;
@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);
font: normal 30px / 40px sans-serif;
color: rgb(@m3(@r(255)));
text-shadow: 1px 1px 2px #000;
opacity: 0;
:before {
content: @pn([泠泠七弦上,静听松风寒。古调虽自爱,今人多不弹。]);
}
animation: show .3s calc((@i - 1) * .3s) linear forwards;
@keyframes show { to { opacity: 1; } }
</css-doodle>
|