CSS題目系列（3）- 實現文字切割效果

4Ark發表於2018-11-26
CSS

描述

有一天逛 Codepen 的時候，看到這麼一個效果：將文字上下切開兩半。

點進去看了一下程式碼，發現原理很簡單，大概就是通過偽類使用attr()函式獲取內容，然後進行定位。

你可以點下方連結檢視效果：

gd4ark.github.io/blog_demos/…

正文

先讓兩個偽元素獲取到屬性的值，並且將位置調好。

<h1 data-content="I Love CSS">I Love CSS</h1>
複製程式碼

樣式部分

h1 {
    position: relative;
    color: transparent;
}

h1::before,
h1::after {
    /* 通過 attr 獲取屬性的值 */
    content: attr(data-content);
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    color: #CC3333;
}

/* 切割部分 */
h1::before {
    /* 上對齊 */
    top: 0;
    height: 50%;
}

/* 剩餘部分 */
h1::after {
    /* 下對齊 */
    bottom: 0;
    height: 50%;
}
複製程式碼

這時候的效果是這樣的，所以我們要把剩餘部分的文字進行底部對齊。

CSS題目系列（3）- 實現文字切割效果

這裡使用flex佈局對齊，剩餘部分改為：

/* 剩餘部分 */
h1::after{
    bottom: 0;
    height: 50%;
    display: flex;
    align-items: flex-end;
}
複製程式碼

這時候：

CSS題目系列（3）- 實現文字切割效果

到現在，就已經做好，只要在切割部分上應用動畫，即可實現炫酷的切割效果：

/* 切割部分 */
h1::before{
    animation: action 5s 1s ease alternate infinite;
}
@keyframes action{
    0%{
        transform: translateX(0px);
    }
    30%{
        transform: translateX(-5vw);
    }
    60%{
        transform: translateX(0px);
    }
    100%{
        transform: translateX(5vw);
    }
}
複製程式碼

完整程式碼：github.com/gd4Ark/blog…

後記

不得不說那些大神們的腦洞真是大，如果沒見過這個效果之前，我是無論如何都想不到可以如此簡單的實現這麼炫酷的切割效果。

注：此文為原創文章，如需轉載，請註明出處。

原文連結

相關文章