利用CSS3實現文字向右循環的閃過效果
這篇文章主要跟大家分享了利用純CSS3實現文字向右循環閃過效果的相關資料，因為兼容性的問題，常被用於移動端，實現的效果非常不錯，文中給出了詳細的介紹和範例程式碼，需要的朋友們下面來一起看看吧。
本文介紹的利用純CSS3實作文字向右循環閃過效果的相關資料，下面話不多說，大家先來看看範例程式碼吧。
範例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.shadow {
text-align: center;
/* 背景颜色线性渐变 */
/* 老式写法 */
/* linear为线性渐变，也可以用下面的那种写法。left top，right top指的是渐变方向，左上到右上 */
/* color-stop函数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。所以本次渐变为两边灰色，中间渐白色 */
background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
/* 新式写法 */
/* background: -webkit-linear-gradient(left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); */
/* 设置为text，意思是把文本内容之外的背景给裁剪掉 */
-webkit-background-clip: text;
/* 设置对象中的文字填充颜色 这里设置为透明 */
-webkit-text-fill-color: transparent;
/* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */
-webkit-animation: animate 1.5s infinite;
}
/* 兼容写法，要放在@keyframes前面 */
@-webkit-keyframes animate {
/* 背景从-100px的水平位置，移动到+100px的水平位置。如果要移动Y轴的，设置第二个数值 */
from {background-position: -100px;}
to {background-position: 100px;}
}
@keyframes animate {
from {background-position: -100px;}
to {background-position: 100px;}
}
</style>
</head>
<body>
<p class="shadow">文字向右闪过效果</p>
</body>
</html>下面這是效果圖：
這個白色漸變閃過效果用CSS3做很容易也很方便，唯一不好的地方應該就是相容問題了。所以現在一般都用在行動端上面了。
來啦來啦！ (敲黑板) 我覺得程式碼註解已經比較清楚了，所以畫畫重點就好了！ ！ ！
1、infinite 閃滴！
2、-webkit-text-fill-color: transparent; 文字填滿色彩為透明，沒有設定的話，看不出白色漸變劃過效果的！
3、-webkit-background-clip: text; 將文字內容以外的背景被裁剪掉，如果不加，文字顯示不出來，只顯示漸變的顏色！
4、color-stop() 漸層的color-stop 函數，以在漸層中化的位置與顏色，是它，讓我們能想在哪裡出現變化一閃的效果了！
最後，說一下思路：
首先，設定一個中間白色、兩邊灰色的漸變背景色；
其次，文字填滿顏色設為透明(才能看到白色背景)；
接著，把文字之外的背景色給裁剪掉(只顯示文字)；
最後，用@keyframes，讓背景白色位置循環從左到右執行。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是利用CSS3實現文字向右循環的閃過效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
ppt怎麼做圓形的圖片和文字
Mar 26, 2024 am 10:23 AM
首先，在 PPT 中繪製一個圓圈，然後插入一個文字框，輸入文字內容。最後，設定文字方塊的填滿和輪廓為無，即可完成圓形圖片和文字的製作。
word中怎麼給文字加點？
Mar 19, 2024 pm 08:04 PM
我們在日常製作Word文件時,有時需要給文檔中的某些文字下方加點,尤其是出試題的時候。來用於重點突出這部分內容,小編給大家分享下word中怎麼給文字加點的技巧，希望能幫助到您。 1.開啟一個空白word文檔。 2.舉例例如給「如何為文字加點」幾個字的下面加上點。 3.我們先把「如何給文字加點」幾個字用滑鼠左鍵選擇了，注意以後你想給那個字加點就先用滑鼠的左鍵選擇哪個字。今天我們給這幾個字都加一點，所以幾個字都選了。選中這幾個字後右鍵，在彈出的功能框中點擊字體。 4.然後就會出現一個這樣的
Golang圖片處理：學習如何添加浮水印和文字
Aug 17, 2023 am 08:41 AM
Golang圖片處理：學習如何添加浮水印和文字引言：在現代數位化和社群媒體的時代，圖片處理已經成為了一項重要的技能。無論是個人使用還是商務運營，添加浮水印和文字都是常見的需求。在本文中，我們將探討使用Golang進行圖片處理的方法，學習如何添加浮水印和文字。背景：Golang是一門開源的程式語言，以其簡潔的語法、高效的性能和強大的並發能力而聞名。它已經成為許多開發
如何在Vue專案中使用行動端的手勢操作
Oct 08, 2023 pm 07:33 PM
如何在Vue專案中使用行動端的手勢操作隨著行動裝置的普及，越來越多的應用程式需要在行動端上提供更友善的互動體驗。而手勢操作是行動裝置上常見的互動方式之一，它能夠讓使用者透過觸控螢幕來完成各種操作，如滑動、縮放等。在Vue專案中，我們可以透過第三方函式庫來實現行動手勢操作，以下將介紹如何在Vue專案中使用手勢操作，並提供具體的程式碼範例。首先，我們需要引入一個專門用
解決Vue行動端多觸點問題
Jun 30, 2023 pm 01:06 PM
在行動裝置開發中，我們經常會遇到多手指觸控的問題。當使用者在行動裝置上使用多個手指滑動或縮放螢幕時，如何準確地識別和回應這些手勢是一個重要的開發難題。在Vue開發中，我們可以採取一些措施來解決行動端多手指觸控問題。一、使用vue-touch插件vue-touch是用於Vue的手勢插件，它可以方便地處理移動端的多手指觸控事件。我們可以透過npm安裝vue-to
如何修改圖片上的文字
Aug 29, 2023 am 10:29 AM
修改圖片上的文字可以透過使用圖片編輯軟體、線上工具或截圖工具來實現。其具體步驟為：1、開啟圖片編輯軟體並匯入需要修改文字的圖片；2、選擇文字工具；3、點擊圖片上的文字區域，以建立文字方塊；4、在文字方塊中輸入您要要的新文字；5、如果只是想刪除圖片上的文字，可以使用橡皮擦工具或選擇工具來選擇並刪除文字區域。
css3怎麼實現花邊邊框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。
