重新定义盒子模型：*{box-sizing:border-box;}定义书的大小：.book{--sw:0.3em;/*笔画宽度*/width:15em;高度：10em；背景色：白色；边框：var(--sw)solidcadetblue；边界半径：var(--sw);font-size:20px;}定义书页大小:.book{position:relative;}.book.page{height:inherit;宽度：calc(50%+var(--sw)+var(--sw)/2);背景色：继承；边界：继承；边界半径：继承；p:计算(-1*var(--sw));右：计算（-1*var（--sw））；}在页面上绘制笔画：.book.page{display:flex;弹性方向：列；证明内容：空格之间；填充：8%5%；}.book.pagespan{显示：块；宽度：100%；border-top:var(--sw)solidcadetblue;border-radius:inherit;}定义笔画动画效果，依次绘制5笔画：.book.pagespan{animation:4slinearinfinite;变换原点：左；转换：scaleX（0）；}.book.pagespan：nth-??child（1）{动画名称：stroke-1；}.book.pagespan：nth-??child（2）{动画名称：stroke-2;}.book.pagespan:nth-child(3){animation-name:stroke-3;}.book.pagespan:nth-child(4){animation-name:stroke-4;}.book.pagespan:nth-child(5){动画名称：stroke-5;}@keyframesstroke-1{0%{变换：scaleX(0);}10%,100%{变换:scaleX(1);}}@keyframesstroke-2{10%{变换：scaleX(0);}20%,100%{转换：scaleX(1);}}@关键帧stroke-3{20%{transform:scaleX(0);}30%,100%{变换:scaleX(1);}}@keyframesstroke-4{30%{变换：scaleX(0);}40%,100%{转换：scaleX(1);}}@keyframesstroke-5{40%{变换：scaleX(0);}50%,100%{转换：scaleX(1);}}最后，确定书页翻动的效果：.book.page{animation:flip4slinearinfinite;变换原点：左；转换样式：保留3d；}@keyframes翻转{55%{转换：rotateY(0)translateX(0)skewY(0)；}70%{transform:rotateY(-90deg)translateX(calc(-1*var(--sw)/2))skewY(-20deg);}80%,100%{transform:rotateY(-180deg)translateX(calc(-1*var(--sw)))skewY(0);}}.book.pagespan{backface-visibility:hidden;}大功告成！