前端日常实战：33#视频演示如何用纯CSS制作牛奶文字变形效果
时间：2023-04-02 22:38:00
HTML
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览在全屏。https://codepen.io/comehop??e/pen/MGNWOm交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cvPryA6源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读定义DOM，容器包含2段文字：Explorer
Discovery
居中展示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景色：黑色；}设置字体样式：p{颜色：白色；字体大小：100px；字体粗细：粗体；字体系列：无衬线字体；文本转换：大写；text-align:center;}让2段文本重叠：p{margin:0;}p:nth-child(1){transform:translateY(50%);}p:nth-child(2){transform:translateY(-50%);}定义两段文字交替显示的动画：p{animation:show-hide10sinfinite;filter:opacity(0);}p:nth-child(1){animation-direction:normal;}p:nth-child(2){animation-direction:reverse;}@keyframesshow-hide{0%{过滤器：不透明度（0）；}25%{过滤器：不透明度（1）；}40%{过滤器：不透明度（1）；}50%{过滤器：不透明度（0）；}}增加字间距效果：@keyframesshow-hide{0%{filter:opacity(0);字母间距：-0.8em；}25%{过滤器：不透明度（1）；}40%{过滤器：不透明度（1）；}50%{过滤器：不透明度（0）；字母间距：0.24em；}}添加文字模糊效果：@keyframesshow-hide{0%{filter:opacity(0)blur(0.08em);字母间距：-0.8em；}25%{滤镜：不透明度（1）模糊（0.08em）；}40%{滤镜：不透明度（1）模糊（0.24em）；}50%{滤镜：不透明度（0）模糊（0.24em）；字母间距：0.24em；}}最后，为容器设置对比度过滤器：.container{filter:contrast(10);背景色：黑色；溢出：隐藏；}你已经完成了！
