欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)文字高光水波漸變的動態(tài)效果實例

  發(fā)布時間：2016-08-29 17:20:52   作者：佚名   我要評論
這篇文章介紹的是用CSS實現(xiàn)文字高光水波漸變的效果，實現(xiàn)后效果很漂亮，對大家日常開發(fā)很有用處，下面小編整理好分享給大家。有需要的可以參考。

先來看看靜態(tài)的效果圖，動態(tài)效果更好


實例代碼

復制代碼
代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rollcat</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
body{
background: #333;font-family: "Helvetica Neue",Helvetica,"microsoft yahei",STHeiTi,sans-serif;
}
h1{
width: 100%;height: 80px;line-height: 80px;text-align: center;color: green;margin: 50px auto;font-size: 5em;font-weight: normal;
background-image: -webkit-linear-gradient(left, #167993, #fbe500 25%, #167993 50%, #fbe500 75%, #167993);
background-size: 200% 100%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: mask 4s infinite linear;
}
/******不太想做IE等瀏覽器的兼容的分割線******/
@-webkit-keyframes mask {
0% { background-position: 0 0;}
100% { background-position: -100% 0;}
}
p{
width: 100%;height: 80px;line-height: 80px;text-align: center;color: #999;margin: 50px auto;font-size: 2em;
background-image: -webkit-linear-gradient(left, #999, #999 5%,#fff 10%, #999 15%, #999);
background-size: 200%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: anim 3s infinite;
}
@-webkit-keyframes anim{
0%{
background-position: 0 0;
}
100%{
background-position: -100% 0;
}
}
</style>
</head>
<body></p> <p><h1>風乍起，吹皺一池春水</h1></p> <p><p>最是那一低頭的溫柔，恰似一朵海蓮花不勝涼風的嬌羞</p></p> <p></body>
</html>

以上就是利用CSS實現(xiàn)文字高光水波漸變動態(tài)效果的全部內容，希望對大家的學習和工作能有所幫助。

相關文章

  • CSS3下的漸變文字效果實現(xiàn)示例

    這篇文章主要介紹了CSS3下的漸變文字效果實現(xiàn)示例的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-02

  • css 進度條的文字根據(jù)進度漸變的示例代碼

    這篇文章主要介紹了css 進度條的文字根據(jù)進度漸變的示例代碼，介紹了進度條里面的文字需要根據(jù)進度的長度而變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一
    2018-01-09

  • css3實現(xiàn)文字掃光漸變動畫效果的示例

    這篇文章主要介紹了css3實現(xiàn)文字掃光漸變動畫效果的示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-07

  • CSS3文字背景色漸變過渡特效源碼

    CSS3文字背景色漸變過渡特效源碼是一段實現(xiàn)了文字顏色漸變過渡效果代碼，本段代碼適應于所有網頁使用，有需要的朋友們歡迎前來下載使用
    2017-05-25

  • 一款純css3實現(xiàn)的顏色漸變按鈕的代碼教程

    今天給大家分享一款純css3實現(xiàn)的顏色漸變按鈕，這款按鈕的邊框和文字的顏色通過css3實現(xiàn)兩種顏色的漸變，清新淡雅，效果非常好看，需要的朋友可以參考下
    2014-11-12

  • 使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變

    使用CSS3 的背景漸變 -webkit-gradient ，用一個背景漸變的 DIV 代替圖片。下面是實現(xiàn)效果示例，相比以上方案優(yōu)點是不使用圖片，減小請求量和流量
    2014-08-19

  • CSS 網頁文字漸變效果

    本文介紹的技術很經典，也算是一篇老文章了，相信很多人也都看過，之前神飛有注意到國內有些翻譯，但是不全面，這里我就將其完整的翻譯了一下。
    2009-08-03

  • css實現(xiàn)文字顏色漸變的三種方法

    在web前端開發(fā)過程中，UI設計師經常會設計一些帶漸變文字的設計圖，在以前我們只能用png的圖片來代替文字，今天小編給大家?guī)砹薱ss實現(xiàn)文字顏色漸變的三種方法，一起看看
    2018-11-22

最新評論