css文字高光,CSS实现文字高光水波渐变的动态效果实例
先来看看静态的效果图,动态效果更好
实例代码
复制代码代码如下:
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;}
}
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;
}
}
风乍起,吹皱一池春水
最是那一低头的温柔,恰似一朵海莲花不胜凉风的娇羞
以上就是利用CSS实现文字高光水波渐变动态效果的全部内容,希望对大家的学习和工作能有所帮助。
css文字高光,CSS实现文字高光水波渐变的动态效果实例相关推荐
- HTML荧光文字动态效果,CSS实现文字高光水波渐变的动态效果实例
先来看看静态的效果图,动态效果更好 实例代码 复制代码代码如下: rollcat *{ margin: 0;padding: 0; } body{ background: #333;font-fami ...
- CSS冷门属性 mix-blend-mode 制作文字镂空效果
CSS冷门属性 mix-blend-mode 制作文字镂空效果 本篇文章为大家带来如何制作文字镂空效果,仅仅使用CSS样式进行处理,借助 mix-blend-mode 属性,将文字的颜色反转,从而实现 ...
- 使用css将超出盒子的文字显示为省略号
使用css将超出盒子的文字显示为省略号 为目标盒子设置以下css样式就可以了: li {overflow: hidden; /* 将超出的内容隐藏 */white-space: nowrap; /* ...
- html在表单左上角显示文字,js+css实现增加表单可用性之提示文字
平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: ...
- 文字阴影-CSS Text-Shadow
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- css 文字重叠_html网页文字重叠 字体叠加显示css如何解决
DIV+CSS布局文字较多时候重叠下一行文字内容如何解决? CSS+DIV布局ul li列表文字内容,当文字比较多时,上排文字重叠在下排li标签内文字上这是什么原因?如何解决css文字重叠呢? 内容较 ...
- css 文字可选,在HTML5中如何使用CSS建立不可选的文字
下面的例子展示了在HTML5中你如何使用CSS建立不可选的文字. Creating non-selectable text using CSS div { margin-bottom: 20px; p ...
- html表单左侧文字对齐,CSS图标文字对齐和表单输入框文字对齐兼容
张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-bloc ...
- 字体系列之文字样式(CSS、HTML)
字体系列之文字样式(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta char ...
最新文章
- 计算机科目三教学设计,信息技术-教学设计模板(科目三).pdf
- 用这样的方法,我解决了leetcode的大部分的这种题型!
- BugkuCTF-Misc:细心的大象
- Android开发 Intent传递参数,获取数据为null
- 【JDK源码】java.io包常用类详解
- C# Socket服务器及多客户端连接应用例程
- python如何复制文件?
- c语言开发移动通信,基于ARM的高效C语言编程
- 三层交换机启用OSPF后,如何实现数据转发路径
- Python 测试驱动开发读书笔记(二)使用unittest框架扩展功能测试
- 公司能否开除长期请病假,无法正常工作的员工?
- doris历程_Doris简史-为分析而生的11年
- 扫描未能发现所选服务器,扫描找不到远程服务器
- 通过PS修出自然的大长腿
- python进行数据处理——pandas的drop函数
- 装了冰点还原如何修改计算机ip,冰点还原软件如何使用
- webpack中对html进行打包压缩
- 拓路前行-TDSQL追求极致体验的这一路
- ARDUINO:控制两台步进电机同步运转
- linux文件操作命令入门笔记(tar,cp,mv,zip,scp)
热门文章
- java jsp小例题_JSP 相关试题(一)
- php博客系统答辩ppt,基于PHP实现的WEB图片共享系统-php(开题报告+源程序+论文+答辩PPT+文献综述)...
- 以下不是python语言合法变量_违法行为的客体是指法律所保护的而为违法行为所侵害的:()...
- python3实现批量修改图片名称
- 【Vue轮播插件】常用的vue轮播插件整理
- apmserv5.2.6 mysql启动失败_win7(xp) APMServ5.2.6 Apache启动失败,MYSQL启动失败 的解决办法...
- 性别歧义代词(GAP) 2019年 NLP 研讨会性别偏见问题共同任务--阅读笔记
- cuda必须装在c盘吗_软件安装到C盘会影响计算机运行速度吗?一个问题引发的思考...
- 360随身wifi驱动 v3.1.0.1075 官方版
- ida如何识别linux内核函数,如何识别IDA反汇编中动态链接库中的函数