資訊專欄INFORMATION COLUMN
摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽?？山换ヒ曨l教程此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。
效果預(yù)覽
按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽。
https://codepen.io/zhang-ou/pen/LmjNgL
可交互視頻教程此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。
請(qǐng)用 chrome, safari, edge 打開觀看。
https://scrimba.com/c/c2EvWHN
源代碼下載請(qǐng)從 github 下載。
https://github.com/comehope/front-end-daily-challenges/tree/master/012-broken-text-effects
代碼解讀定義 dom，只有一個(gè)元素，元素有一個(gè) data-text 屬性，屬性值等于元素內(nèi)的文本：
BREAK
居中顯示：
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
設(shè)置漸變背景色：
body {
background: linear-gradient(brown, sandybrown);
}
設(shè)置文本的字體字號(hào)：
.text {
font-size: 5em;
font-family: "arial black";
}
利用偽元素增加文字：
.text {
position: relative;
}
.text::before,
.text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: lightyellow;
}
設(shè)置左側(cè)文字的遮罩：
.text::before {
background-color: darkgreen;
clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
}
設(shè)置右側(cè)文字的背景和遮罩：
.text::after {
background-color: darkblue;
clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
}
當(dāng)鼠標(biāo)劃過時(shí)，遮罩的文字分別向兩側(cè)偏移：
.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;*/
}
兩側(cè)文字增加歪斜效果：
.text:hover::before {
transform: rotate(-5deg);
}
.text:hover::after {
transform: rotate(5deg);
}
微調(diào)文字的高度：
.text:hover::before {
top: -0.05em;
}
.text:hover::after {
top: 0.05em;
}
大功告成！
知識(shí)點(diǎn)data-* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
shape functions https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape#Syntax
rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before
::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52289.html
摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄...
摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄...
摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽?？山换ヒ曨l教程此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbfmHS?w=400&h=303); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽。 https://codepen.io/zhang-ou/pen/...
閱讀 2040·2023-04-25 14:50
閱讀 2920·2021-11-17 09:33
閱讀 2628·2019-08-30 13:07
閱讀 2850·2019-08-29 16:57
閱讀 918·2019-08-29 15:26
閱讀 3563·2019-08-29 13:08
閱讀 2003·2019-08-29 12:32
閱讀 3398·2019-08-26 13:57
