前端日常实践：14#视频演示了如何使用纯CSS制作一本书侧立的特效
时间：2023-04-05 13:18:22
HTML5
预览效果按右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览。https://codepen.io/zhang-ou/pen/deVgRM互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cb6pkUE源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/014-three-languages-for-web-development代码解释定义了dom，一个container包含一个span，span包含text：HTML
居中显示：html,body{width:100%;高度：100%；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(totopleft,white,dimgray);}绘制书的正面：.book{width:12rem;高度：18rem；背景：线性渐变（海军蓝、深粉色、番茄色）；transform:skewY(-10deg);}绘制书的侧面：.book{position:relative;}.book::before{content:'';位置：绝对；宽度：1.5rem；高度：100%；背景：线性渐变（海军蓝、深粉色、番茄色）；顶部：0；左：-1.5rem；变换：偏斜（45度）；变换原点：对；filter:brightness(0.6);}绘制书的顶面：.book::after{content:'';位置：绝对；宽度：100%；高度：1.5rem；背景：白色；顶部：-1.5rem；左：0；变换原点：底部；变换：skewX（45deg）；filter:brightness(0.9);}给书添加阴影，让书更立体：.book{box-shadow:-10px5px30pxrgba(0,0,0,0.5);}设置文字样式：.book跨度{颜色：白烟；字体大小：2.2rem；字体系列：无衬线；显示：块；背景：银色；文本对齐：居中；高度：8rem；上边距：5rem；填充顶部：2rem；框大小：边框框；文字阴影：-2px2px10pxrgba(0,0,0,0.3);位置：绝对；width:100%;}绘制文字的侧面，类似于绘制书的侧面的方法：.bookspan{position:relative;}.bookspan::before{content:'';位置：绝对；宽度：1.5rem；高度：100%；背景：银色；顶部：0；左：-1.5rem；变换原点：对；变换：偏斜（45度）；filter:brightness(0.6);}在文字下方添加一行小字体文字：.bookspan::after{content:'development';显示：块；font-size:1rem;}dom改为3本书，包含在一个容器中，样式类分别命名为：
HTML 