前端日常实践：12#视频演示如何用纯CSS制作一个文字断线的交互特效
时间：2023-03-30 14:21:11
CSS
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接全屏预览。https://codepen.io/zhang-ou/pen/LmjNgL互动视频教程本视频是互动式的，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/c2EvWHN源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/012-broken-text-effects代码解释定义了dom，只有一个元素，该元素有一个data-text属性，和属性值等于元素Textinside:BREAK
居中显示：html,body{height:100%;显示：弹性；对齐项目：居中；justify-content:center;}设置渐变背景颜色：body{background:linear-gradient(brown,sandybrown);}设置文本字体大小：.text{font-size:5em;font-family:"arialblack";}使用伪元素添加文本:.text{position:relative;}.text::before,.text::after{content:attr(data-text);位置：绝对；顶部：0；左：0；color:lightyellow;}settings左边文字的遮罩:.text::before{background-color:darkgreen;clip-path:polygon(00,60%0,30%100%,0100%);}设置右边文字的背景和Mask:.text::after{background-color:darkblue;clip-path:polygon(60%0,100%0,100%100%,30%100%);}当鼠标悬停时，遮罩文字分别向两边偏移：.text::before,.text::after{transition:0.2s;}.text:hover::before{left:-0.15em;}.text:hover::after{left:0.15em;}隐藏辅助元素，包括原始文本和伪元素的背景颜色：.text{color:transparent;}.text::before{/*background-color:darkgreen;*/}。text::after{/*background-color:darkblue;*/}给两边的文字添加倾斜效果:.text:hover::before{transform:rotate(-5deg);}.text:hover::after{transform:rotate(5deg);}微调文字高度：.text:hover::before{top:-0.05em;}.text:hover::after{top:0.05em;}大功告成！知识点数据-*https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*clip-pathhttps://developer.mozilla.org/en-US/docs/Web/CSS/clip-pathshape函数https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape#Syntaxrotate()https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate::beforehttps://developer.mozilla.org/en-US/docs/Web/CSS/::before::afterhttps://developer.mozilla.org/en-US/docs/Web/CSS/::之后
