真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果

今天小編給大家分享一下怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

易縣網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,易縣網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為易縣1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的易縣做網(wǎng)站的公司定做！

今天偶然看到這樣一類很有意思的文字快閃動(dòng)畫：

怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果

這類文字快閃切換效果運(yùn)用得當(dāng)?shù)脑?，能比較好的吸引用戶的眼球。

當(dāng)然，今天并非是想用 CSS 實(shí)現(xiàn)上述的的效果。在嘗試的過(guò)程中，我發(fā)現(xiàn)了另外一類能夠使用 CSS 非常輕松實(shí)現(xiàn)文字快閃動(dòng)畫，運(yùn)用了blur() 濾鏡和 contrast() 濾鏡產(chǎn)生的融合效果，類似于這樣：

怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果

blur 濾鏡混合 contrast 濾鏡產(chǎn)生融合效果

本文的重點(diǎn)，模糊濾鏡疊加對(duì)比度濾鏡產(chǎn)生的融合效果。單獨(dú)將兩個(gè)濾鏡拿出來(lái)，它們的作用分別是：

filter: blur()：給圖像設(shè)置高斯模糊效果。
filter: contrast()：調(diào)整圖像的對(duì)比度。

但是，當(dāng)他們“合體”的時(shí)候，產(chǎn)生了奇妙的融合現(xiàn)象。

先來(lái)看一個(gè)簡(jiǎn)單的例子：

怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果

仔細(xì)看兩圓相交的過(guò)程，在邊與邊接觸的時(shí)候，會(huì)產(chǎn)生一種邊界融合的效果，通過(guò)對(duì)比度濾鏡把高斯模糊的模糊邊緣給干掉，利用高斯模糊實(shí)現(xiàn)融合效果。

上述效果的實(shí)現(xiàn)基于兩點(diǎn)：

圖形是在被設(shè)置了 filter: contrast() 的畫布背景上進(jìn)行動(dòng)畫的
進(jìn)行動(dòng)畫的圖形被設(shè)置了 filter: blur()（進(jìn)行動(dòng)畫的圖形的父元素需要是被設(shè)置了 filter: contrast() 的畫布）

當(dāng)然，背景色不一定是白色，我們稍稍修改上面的Demo，簡(jiǎn)單的示意圖如下：

怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果

使用 blur/contrast 濾鏡實(shí)現(xiàn)文字的切換

利用上述的技巧，我們可以實(shí)現(xiàn)文字的融合效果，像是這樣：

怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果

這樣，利用這個(gè)技巧，我們可以巧妙構(gòu)思一下動(dòng)畫：

多個(gè)文字按順序依次出現(xiàn)（利用 animation-delay 進(jìn)行控制處理）
做到上一個(gè)文字消失的同時(shí)，下一個(gè)文字出現(xiàn)
疊加上上述的濾鏡即可

核心代碼如下：


  iPhone

Pro

強(qiáng)得很！

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

$speed: 8s;
$wordCount: 4;

.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 120px;
    filter: contrast(15);
}
.word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: change $speed infinite ease-in-out;

    @for $i from 0 to $wordCount {
        &:nth-child(#{$i + 1}) {
            animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
        }
    }
}

@keyframes change {
    0%,
    5%,
    100% {
        filter: blur(0px);
        opacity: 1;
    }
    50%,
    80% {
        filter: blur(80px);
        opacity: 0;
    }
}

整段代碼，核心需要關(guān)注 @keyframes change 這個(gè)動(dòng)畫，我們通過(guò)順序給文字添加上這個(gè)動(dòng)畫（也就是利用 animation-delay 順序添加了延時(shí)）實(shí)現(xiàn)了上一個(gè)文字消失的過(guò)程下一個(gè)文字顯示的效果。

上述的 .g-container 添加了這樣一句代碼 -- filter: contrast(15)，去掉這句的話，效果是這樣的：

怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果

加上這句關(guān)鍵的代碼 -- filter: contrast(15)，整個(gè)效果就如一開始的題圖所示：

怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果

整個(gè)動(dòng)畫的兩個(gè)核心關(guān)鍵點(diǎn)：

利用了 blur 濾鏡混合 contrast 濾鏡產(chǎn)生融合效果
在上一個(gè)文字消失的過(guò)程中，顯示下一個(gè)文字，以此產(chǎn)生當(dāng)前展示文字是由上個(gè)文字演變而來(lái)的效果

由此，你可以通過(guò) HTML 控制文字的條數(shù)、改變 SASS 變量中表示動(dòng)畫時(shí)長(zhǎng)的 $speed 和文字條數(shù)的 $wordCount 以及最終 @keyframes change 里面的參數(shù)，不斷去調(diào)整優(yōu)化你要的效果。演變出各種文字快閃效果。

以上就是“怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：怎么使用CSS3濾鏡制作文字快閃切換動(dòng)畫效果
當(dāng)前路徑：http://weahome.cn/article/pgjcoi.html