效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击全屏预览链接。https://codepen.io/comehop??e/pen/QrxxaW交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cgRgQHr请从github下载源码。https://github.com/comehop??e/front-end-daily-challenges/tree/master/021-a-text-sliding-effect-ui代码解释定义dom，容器包含问答：

中心显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；背景：暗青色；}样式文字：p{宽度：400px；高度：2.5em；颜色：金色；字体大小：24px；边框：2px纯金；行高：2.5em；文本对齐：居中；边界半径：10px；字体系列：无衬线；字母间距：2px；字间距：2px；(0,0,0,0.2);}为答案设置样式：p{position:relative;}pspan{position:absolute;宽度：100%；顶部：0；左：0；}p.answer{颜色：whitesmoke；字体大小：1.1em；文本转换：大写；背景：rgba(0,0,0,0.1);}添加问题问答滑动切换动画效果：p{overflow:hidden;}pspan{transition:0.5sease-out;}p.question{left:0;}p:hover.question{left:100%;}p.answer{left:-100%;}p:hover.answer{left:0;}在dom中再添加2个问题：在thedom添加标题：设置标题样式：h1{font-family:sans-serif;颜色：金色；text-align:center;}最后，使用伪元素添加一个大问号作为装饰背景：h1{position:relative;}h1::after{content:'?';位置：绝对；顶部：-0.35em；左：0；字体大小：25em；变换：旋转（15度）；：不透明度（0.3）；text-shadow:10px10px10pxrgba(0,0,0,0.2);}知识点rotate()https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotatefilterhttps//developer.mozilla.org/zh-CN/docs/Web/CSS/filtertransitionhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/transition