怎么使用純CSS代碼實現文字斷開的動畫效果

這篇文章將為大家詳細講解有關怎么使用純CSS代碼實現文字斷開的動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　代碼解讀

　　定義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;

　　}

關于“怎么使用純CSS代碼實現文字斷開的動畫效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。