CSS Writing Modes

撰写时间：2025-04-14

修订时间：2025-04-15

古诗的展现

基本设置

body { display: flex; height: 100vh; justify-content: center; align-items: center; } div { writing-mode: vertical-rl; width: 100%; margin: 0.5em; padding: 0.5em; & > h2 { margin-left: 2em; letter-spacing: 0.5em; color: rgb(140, 195, 201); } & > p { text-indent: 2em; line-height: 1.5em; letter-spacing: 0.2em; } }

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

应用scale动画

body { display: flex; height: 100vh; justify-content: center; align-items: center; } div { writing-mode: vertical-rl; background: #f0e5d3; width: 100%; margin: 0.5em; padding: 0.5em; position: relative; &::before, &::after { content: ''; width: 10px; position: absolute; top: -0.2em; left: 0; bottom: -0.2em; background: linear-gradient(45deg, #b9935a, #8b5d33); border-radius: 25px; box-shadow: 2px 0 8px rgba(0,0,0,0.3); } &::after { right: 0; } & > h2 { margin-left: 2em; letter-spacing: 0.5em; color: #333; } & > p { text-indent: 2em; line-height: 1.5em; letter-spacing: 0.2em; color: #5a4630; } } div { animation: unfold 3s ease-out; } @keyframes unfold { from {transform: scaleX(0);} to {transform: scaleX(1);} }

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

应用width属性动画

body { display: flex; height: 100vh; justify-content: left; align-items: center; } div { writing-mode: vertical-rl; background: #f0e5d3; width: 100%; margin: 0.5em; padding: 0.5em; position: relative; &::before, &::after { content: ''; width: 12px; position: absolute; top: 0em; left: 0; bottom: 0em; background: linear-gradient(45deg, #b9935a, #8b5d33); border-radius: 25px; box-shadow: 2px 0 8px rgba(0,0,0,0.3); } &::after { right: 0; } & > h2 { margin-left: 2em; letter-spacing: 0.5em; color: #333; } & > p { text-indent: 2em; line-height: 1.5em; letter-spacing: 0.2em; color: #5a4630; } } div { animation: unfold 8s ease-out; overflow: hidden; } @keyframes unfold { from {width: 0%;} to {width: 100%;} }

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

这种效果是往右展开的效果，并且，两端的木棍的高度被限制在卷轴的高度之内。效果不够逼真。

应用蒙版

比较真实的效果应是，卷轴内容不动，而随着木棍的左右展开，逐渐露出卷轴的内容。因此，可考虑使用蒙版的效果。

:root { --stick-width: 15px; } body { display: flex; height: 100vh; justify-content: center; align-items: center; } div { writing-mode: vertical-rl; background: #f0e5d3; background-image: url('data:image/svg+xml;utf8,'); background-size: 4px 4px; width: 100%; height: 70%; margin: 0.2em 3em; padding: 1em 3em; position: relative; &::before, &::after { content: ''; position: absolute; width: 50%; top: -0.5em; bottom: -0.5em; background: var(--dark-body-bg-color); z-index: 1; background-image: linear-gradient(45deg, #b9935a, #8b5d33); background-repeat: no-repeat; background-size: var(--stick-width) 100%; animation: scroll 10s 0.5s infinite ease-in-out alternate; } &::before { left: 0; background-position: right top; } &::after { right: 0; background-position: left top; } & > h2 { margin-left: 2em; letter-spacing: 0.5em; color: rgb(27, 54, 102); font-family: 黑体, SimHei; text-shadow: 4px 4px 4px #aaa; } & > p { text-indent: 2em; line-height: 1.5em; letter-spacing: 0.4em; color: #5a4630; } } @keyframes scroll { 0%, 10% {width: 49.9%;} 90%, 100% {width: var(--stick-width);} }

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

使用::before及::after两个伪类作为蒙版，分别设定了两个各占一半宽度的区域，其背景颜色为body的背景颜色，设置z-index值，确保挡住卷轴的内容。这样，卷轴的内容就完成溶进了背景而消失了。

左蒙版往左吸附在父容器上，右蒙版往右吸附在父容器上。利用background-image的强大机制，在这两块蒙版区域上面再次设定木棍的背景图像。左边木棍往右吸附在左蒙版上，右边木棍往左吸附在右蒙版上。由此，在动画开始前，它们并排在中间。动画开始后，随着两个蒙版的宽度值减少，左右蒙版均朝着各自的吸附点靠拢，从而逐渐露出卷轴中间的内容。

参考资源

CSS Writing Modes Level 3