源代码下载

 

　　https://github.com/comehope/front-end-daily-challenges/tree/master/012-broken-text-effects

 

　　代码解读

 

　　定义dom，只有一个元素，元素有一个data-text属性，属性值等于元素内的文本：

 

　　<divclass="text"data-text="BREAK">BREAK</div>

 

　　居中显示：

 

　　html,body{

 

　　height:100%;

 

　　display:flex;

 

　　align-items:center;

 

　　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);

 

　　position:absolute;

 

　　top:0;

 

　　left:0;

 

　　color:lightyellow;

 

　　}

 

　　设置左侧文字的遮罩：

 

　　.text::before{

 

　　background-color:darkgreen;

 

　　clip-path:polygon(00,60%0,30%100%,0100%);

 

　　}

 

　　设置右侧文字的背景和遮罩：

 

　　.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;

 

　　}

 

　　大功告成！







本文转载自中文网