先来看看静态的效果图，动态效果更好

实例代码

复制代码代码如下:

rollcat

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;}

}

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;

}

风乍起，吹皱一池春水

最是那一低头的温柔，恰似一朵海莲花不胜凉风的娇羞

以上就是利用CSS实现文字高光水波渐变动态效果的全部内容，希望对大家的学习和工作能有所帮助。

HTML荧光文字动态效果,CSS实现文字高光水波渐变的动态效果实例相关推荐

css文字高光,CSS实现文字高光水波渐变的动态效果实例
先来看看静态的效果图,动态效果更好实例代码复制代码代码如下: rollcat *{ margin: 0;padding: 0; } body{ background: #333;font-fami ...
css图片跟文字居中,css 图片文字垂直居中
先来看张图片相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
html表单左侧文字对齐,CSS图标文字对齐和表单输入框文字对齐兼容
张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-bloc ...
html怎样让文字自动换行,css中文字自动换行如何实现
css中文字自动换行如何实现在div css布局中,遇到连续英文字母或连续数字在div.p.h2.h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行. 当然中文字在DIV或任意盒子中均会自动换 ...
用css显示隐藏的文字,用CSS隐藏文字方法的比较
通过CSS来隐藏文字是网站设计做常用的方法, 有多种方法可以达到隐藏文字的目的. 这些方法各有优点和缺点, 下面就来看看这些用CSS隐藏文字的一. CSS语句:display:none 这种方法就是 ...
html css中文字段落,css中文字行间距怎么设置？
在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?本篇文章就来给大家介绍一下css行间距的设置方法 ...
HTML内置css改变文字效果,CSS+HTML文字效果
下面归类一些简单的文字效果,此处都为静态样式,想要动态的,可以根据自身需求添加 hover 效果. Hello World 效果1: image.png h1 { -webkit-box-reflec ...
html css中文字段落,css段落文字（中英文混杂）实现两端对齐
今天分享一个小技巧,是中英文两端对齐,只是应对哪些变态的需求.一般情况下还是不推荐使用的,毕竟使用了几句js. 案例如下: 混合使用汉字和英文的段落默认如下: 两边是不对齐的(一般情况下,我们对这种情 ...
纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...

HTML荧光文字动态效果,CSS实现文字高光水波渐变的动态效果实例

风乍起，吹皱一池春水

HTML荧光文字动态效果,CSS实现文字高光水波渐变的动态效果实例相关推荐

最新文章

热门文章