国产人人在线91人人,中文字幕精品无码一区

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

妙用Background實(shí)現(xiàn)花式文字效果

本文將講解如何利用 background 系列屬性，巧妙的實(shí)現(xiàn)一些花式的文字效果。通過(guò)本文，你將可以學(xué)到：

成都創(chuàng)新互聯(lián)公司專注于紅旗企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城開(kāi)發(fā)。紅旗網(wǎng)站建設(shè)公司,為紅旗等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

通過(guò) background-size 與 background-position 實(shí)現(xiàn)酷炫的文字下劃線效果。
通過(guò) background-size 與 background-position 以及 background-clip 實(shí)現(xiàn)文字逐個(gè)漸現(xiàn)的效果。

起因

寫(xiě)本文的動(dòng)機(jī)是在于，某天，被這樣一個(gè)標(biāo)題所吸引 -- 10 Masterfully Designed Websites[1]，其中列舉了 10 個(gè)極具創(chuàng)意的 Web 網(wǎng)站。

其中一個(gè) Red Bull Racing[2] 網(wǎng)站，是介紹關(guān)于 F1 紅牛車隊(duì)的主頁(yè)。其中有這樣一個(gè)非常有意思的 Hover 動(dòng)畫(huà)效果：

這個(gè)文字的 hover 出現(xiàn)效果，看似簡(jiǎn)單，其實(shí)想要完全實(shí)現(xiàn)它，僅僅依靠 CSS 是非常復(fù)雜的，其中一個(gè)比較難的地方在于 -- 如何讓一個(gè)效果，逐漸作用給整段文字中的部分，而不是一次將整個(gè)效果賦予整段文本。

利用 background 實(shí)現(xiàn)文字的下劃線效果

到這里，我想起了之前在這篇文章中 -- CSS 文字裝飾 text-decoration & text-emphasis[3]，我介紹的一種使用 background 模擬下劃線的效果。

看個(gè)簡(jiǎn)單的 DEMO，使用 background 模擬文字的下劃線效果：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

p {
    width: 600px;
    font-size: 24px;
    color: #666;
}
a {
    background: linear-gradient(90deg, #0cc, #0cc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    color: #0cc;
}

使用 background 模擬文字的下劃線效果，效果圖如下：

又或者，使用 background 模擬虛線下劃線：

a {
    background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 100% 100%;
}

CodePen Demo -- 使用 background 模擬下劃線與虛線下劃線[4]。

這里的一個(gè)核心在于 background 在 display: inline 和 display: block 下的不同表現(xiàn)。

什么意思呢？區(qū)別很明顯，塊級(jí)元素的背景整體是一個(gè)漸變整體，而內(nèi)聯(lián)元素的每一行都是會(huì)有不一樣的效果，整體連起來(lái)串聯(lián)成一個(gè)整體。

當(dāng)然這個(gè)是最基礎(chǔ)的，巧妙的運(yùn)用 background 的各種屬性，我們實(shí)現(xiàn)各種有意思的效果。

巧妙改變 background-size 與 background-position 實(shí)現(xiàn)文字 hover 動(dòng)效

這里，通過(guò)巧妙改變 background-size 與 background-position 屬性，我們可以實(shí)現(xiàn)一些非常有意思的文字 hover 效果。

先看這樣一個(gè) Demo，核心代碼作用于被

標(biāo)簽包裹的標(biāo)簽之上：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 0 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: 1s all;
    color: #0cc;
}

a:hover {
    background-size: 100% 3px;
    color: #000;
}

我們雖然，設(shè)定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff)，但是一開(kāi)始默認(rèn)它的 background-size: 0 3px，也就是一開(kāi)始是看不到下劃線的，當(dāng) hover 的時(shí)候，改變 background-size: 100% 3px，這個(gè)時(shí)候，就會(huì)有一個(gè) 0 3px 到 100% 3px 的變換，也就是一個(gè)從無(wú)到有的伸展效果。

看看最后的效果：

由于設(shè)定的 background-position 是 0 100%，如果，設(shè)定的 background-position 是 100% 100%，我們可以得到一個(gè)反向的效果：

// 其他都保持一致，只改變 background-position，從 0 100% 改為 100% 100%
a {
    ...
    background-position: 100% 100%;
    ...
}

再看看效果，你可以對(duì)比著上面的動(dòng)圖看看具體的差異點(diǎn)在哪：

CodePen Demo -- background underline animation[5]。

OK，如果我們使用 background 實(shí)現(xiàn)兩條重疊的下劃線，再利用上述的兩個(gè)不同的 background-position 值，我們就可以得到一個(gè)更有意思的下劃線 hover 效果。

CSS 代碼示意，注意看兩條使用 background 模擬的下劃線的 background-position 的值是不一樣的：

a {
    background: 
        linear-gradient(90deg, #0cc, #0cc),
        linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    background-size: 100% 3px, 0 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    transition: 0.5s all;
    color: #0cc;
}
a:hover {
    background-size: 0 3px, 100% 3px;
    color: #000;
}

可以得到這樣一種效果，其實(shí)每次 hover，都有兩條下劃線在移動(dòng)：

CodePen Demo -- background underline animation[6]。

通過(guò) background-size 與 background-position 配合 background-clip 實(shí)現(xiàn)文字的漸現(xiàn)

上述一大段都在圍繞 -- 下劃線。

回歸到本文一開(kāi)始提到的 Gif 效果，我們能否實(shí)現(xiàn)在一段文字中，實(shí)現(xiàn)文字的漸現(xiàn)效果呢？

上述技巧利用的是 background，那么 background 背景色能否改變文字的顏色的？答案是可以的，只需要借助 background-clip。

我們稍微改造下代碼，實(shí)現(xiàn)利用 background-clip 實(shí)現(xiàn) hover 的時(shí)候部分文字逐漸改變顏色：


Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, 
molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

p {
    color: #666;
    cursor: pointer;
}

a {    
    background: linear-gradient(90deg, #fc0, #fc0);
    background-size: 0 100px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-clip: text;
    transition: .6s all linear;
}

p:hover a {
    background-size: 100% 100%;
    color: transparent;
}

看看效果，通過(guò) background-clip: text 的遮罩裁剪，我們將 background: linear-gradient(90deg, #fc0, #fc0) 背景色作用給了文字，同時(shí)利用 color: transparent 讓文字展示出背景色的色值：

CodePen Demo -- background-size 與 background-position 以及 background-clip 實(shí)現(xiàn)文字逐個(gè)漸現(xiàn)[7]。

當(dāng)然，稍微對(duì)上述代碼變形，我們就可以演化出幾種不同的效果。

實(shí)現(xiàn)整段文字的漸現(xiàn) - 從透明到出現(xiàn)

第一種就是從透明到有顏色，逐漸展現(xiàn)，這里我們只需要讓 color 一直是 transparent 即可（下述效果借助了一個(gè)按鈕去觸發(fā)效果）：

Button
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

a {    
    background: linear-gradient(90deg, #fc0, #fc0);
    background-size: 0 100px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    color: transparent;
    background-clip: text;
}
.button:hover ~ p a {
    transition: .8s all linear;
    background-size: 0 100px, 100% 100%;
}

效果如下：

實(shí)現(xiàn)整段文字的漸現(xiàn) - 從一種顏色到另外一種顏色

還可以實(shí)現(xiàn)文字從一種顏色到另外一種顏色的逐個(gè)轉(zhuǎn)變，只需要添加多一層 background-image 漸變。

Button
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

a {    
    background: 
        linear-gradient(90deg, #999, #999),
        linear-gradient(90deg, #fc0, #fc0);
    background-size: 100% 100%, 0 100px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    color: transparent;
    background-clip: text;
}
.button:hover ~ p a {
    transition: .8s all linear;
    background-size: 0 100px, 100% 100%;
}

這里需要解釋一下，雖然設(shè)置了 color: transparent，但是文字默認(rèn)還是有顏色的，默認(rèn)的文字顏色，是由第一層漸變賦予的 background: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0)，也就是這一層：linear-gradient(90deg, #999, #999)。

當(dāng) hover 觸發(fā)時(shí)，linear-gradient(90deg, #999, #999) 這一層漸變逐漸消失，而另外一層 linear-gradient(90deg, #fc0, #fc0)` 逐漸出現(xiàn)，借此實(shí)現(xiàn)上述效果。

CodePen -- background-clip 文字漸現(xiàn)效果[8]。

簡(jiǎn)單模擬題圖效果

這里，我們簡(jiǎn)單利用這個(gè)技巧模擬一下文章一開(kāi)始列出的 Gif 的效果：

這個(gè)效果原作者的技巧是：

將每個(gè)單詞作為一個(gè)對(duì)象，包裹一個(gè)特殊的 class。
利用 animation-delay 將動(dòng)畫(huà)逐漸賦予每個(gè)單詞。

這里，我們將整段文本統(tǒng)一處理，簡(jiǎn)單還原：

Button
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

/** 動(dòng)畫(huà)核心 background、line-height、opacity **/
a {    
    background: 
        linear-gradient(90deg, #ff5722, #ff5722),
        linear-gradient(90deg, #aaa, #aaa);
    background-size: 100% 100%, 0 100px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    cursor: pointer;
    color: transparent;
    background-clip: text;
    line-height: 3;
    opacity: 0;
}
.button:hover ~ p a {
    transition: 1.2s background .3s ease-out, .8s line-height ease-out, .6s opacity ease-in;
    background-size: 0 100px, 100% 100%;
    color: transparent;
    line-height: 1;
    opacity: 1;
}
/ ** 簡(jiǎn)單控制半透明黑色遮罩出現(xiàn) **/
a::before {
    content: "";
    position: fixed;
    background: rgba(0, 0, 0, .8);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: .3s all linear;
    opacity: 0;
}
.button:hover ~ p a::before {
    opacity: 1;
}

效果如下：

可以看到，由于是整體控制整段文本，效果上沒(méi)有逐個(gè)單詞控制的好，但是優(yōu)點(diǎn)是代碼量非常少。對(duì)于一些簡(jiǎn)單卡片類的 hover 場(chǎng)景，足以。

background-image、background-clip 實(shí)現(xiàn)文字漸現(xiàn)效果[9]。

完美還原題圖效果

當(dāng)然，題圖效果使用純 CSS 也是不在話下的。只不過(guò)就不是簡(jiǎn)單能夠統(tǒng)一處理的了。

這里，我們需要對(duì)每一個(gè)單詞進(jìn)行精細(xì)化的處理，并且使用每個(gè)單詞的偽元素進(jìn)行額外的動(dòng)畫(huà)。

簡(jiǎn)單的結(jié)構(gòu)如下：

Button


    Lorem 
    ipsum 
    dolor 
    sit 
    amet 
    // ... 類似結(jié)構(gòu)

可以看到，每個(gè)單詞都被包裹，并且添加了 data-text，方便偽元素拿到當(dāng)前單詞。

接下來(lái)，就是設(shè)定動(dòng)畫(huà)，并且通過(guò)順序給每個(gè) 添加相應(yīng)遞增的 animation-delay 以實(shí)現(xiàn)沒(méi)個(gè)單詞動(dòng)畫(huà)的差異性。核心的偽代碼如下：

p {
    position: relative;
    width: 500px;
    overflow: hidden;
}

p span {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(15px) translateZ(0);
    transition-property: transform, opacity;
    transition-duration: .3s, .2s;
}

.button:hover ~ p span {
    opacity: 1;
    color: #ddd;
    transform: translateY(0) translateZ(0);
    transition-duration: 1s, .2s;
}

p span:after,
p span:before {
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 0;
    z-index: 1;
    transform: translateZ(0);
}

p span:after {
    color: #e62541;
    transition-property: opacity;
    transition-duration: .1s;
}

.button:hover ~ p span:after {
    opacity: 0;
    transition-property: opacity;
    transition-duration: .4s;
}

@for $i from 1 to 21 {
    p span:nth-child(#{$i}) {
        transition-delay: #{$i * 0.04}s;
        
        &::after {
            transition-delay: #{$i * 0.04 + 0.2}s;
        }
    }
}

其實(shí)動(dòng)畫(huà)本身不太復(fù)雜，主要講兩點(diǎn)：

hover 狀態(tài)下和非 hover 狀態(tài)下的 transition-duration 是不一樣的，是因?yàn)槿∠?hover 過(guò)程中，動(dòng)畫(huà)消失過(guò)程的時(shí)間通常是要求更短的。
借助了 SASS 的循環(huán) @for $i from 1 to 21 {} 遞增給每個(gè) span 和它的偽元素添加了遞增的 transition-delay。

最終，我們可以得到如下的結(jié)果：

完整的代碼，你可以猛戳 -- CSS 靈感 - 利用 animation-delay 實(shí)現(xiàn)文字漸現(xiàn)效果[10]。

最后

好了，本文到此結(jié)束，希望對(duì)你有幫助 ????

參考資料

[110 Masterfully Designed Websites: https://medium.com/@MonteVerdeVT/10-masterfully-designed-websites-f999112e2fa9。

[2]Red Bull Racing: https://thenewmobileworkforce.imm-g-prod.com/back-at-hq。

[3]CSS 文字裝飾 text-decoration & text-emphasis: https://github.com/chokcoco/iCSS/issues/103。

[4]CodePen Demo -- 使用 background 模擬下劃線與虛線下劃線: https://codepen.io/Chokcoco/pen/YzNQKwm。

[5]CodePen Demo -- background underline animation: https://codepen.io/Chokcoco/pen/QWdgLwp。

[6]CodePen Demo -- background underline animation: https://codepen.io/Chokcoco/pen/MWJogjQ。

[7]CodePen Demo -- background-size 與 background-position 以及 background-clip 實(shí)現(xiàn)文字逐個(gè)漸現(xiàn): https://codepen.io/Chokcoco/pen/qBjmvdq?editors=1100。

[8]CodePen -- background-clip 文字漸現(xiàn)效果: https://codepen.io/Chokcoco/pen/XWgpyqz。

[9]background-image、background-clip 實(shí)現(xiàn)文字漸現(xiàn)效果: https://codepen.io/Chokcoco/pen/abwWMJm。

[10]CSS 靈感 - 利用 animation-delay 實(shí)現(xiàn)文字漸現(xiàn)效果: https://csscoco.com/inspiration/#/./animation/animation-delay-control-text-effect。

網(wǎng)頁(yè)題目：妙用Background實(shí)現(xiàn)花式文字效果
轉(zhuǎn)載源于：http://www.dlmjj.cn/article/dpdhsgd.html

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区