1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. *{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. body{
  12. background-color: black;
  13. }
  14. div {
  15. width: 600px;
  16. height: 200px;
  17. line-height: 200px;
  18. font-size: 150px;
  19. font-weight: bold;
  20. border: 1px solid red;
  21. margin:200px auto;
  22.  
  23. /*background-color: blue;*/
  24. color: rgba(255,255,255,0.3);
  25. /*color:red;*/
  26. /*
  27. transparent 100px:前100个像素是透明色
  28. white:150 透明色到白色的线性渐变为150
  29.  
  30. */
  31. background: linear-gradient(-45deg,transparent 100px ,white 150px,white 180px, transparent 220px);
  32. background-position: -450px 0;
  33. background-repeat: no-repeat;
  34.  
  35. /*裁剪私有属性 只有文字范围内有背景
  36. 通过测试,写在 background后面才生效
  37. */
  38. -webkit-background-clip: text;
  39. transition: all 5s;
  40.  
  41. }
  42. div:hover{
  43. background-position: 450px 0;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div>
  49. 线性渐变
  50. </div>
  51. </body>
  52. </html>

效果如图:

CSS3之实现光润效果的更多相关文章

  1. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  2. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

  3. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  4. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  5. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  6. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  7. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  8. CSS3实现时间轴效果

    原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...

  9. 用css3实现各种图标效果

    原文:用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最 ...

随机推荐

  1. java变量的自动提升与强制转换

    所有的byte型.short型和char的值将被提升到int型 一个字节可以提升为4个字节 4个字节不可以降为一个字节 强制转换4个字节转换为一个字节 [丢失精度] byte b = 3; b = ( ...

  2. 事务的ACID特性(转)

    ACID特性 数据库中的事务(Transaction)有四个特性,分别是:原子性(Atomicity),一致性(Consistency),隔离性(lsolation),持久性(Durability) ...

  3. HTML标记语言

    一.html的文档结构 html含义为超文本标记语言,html文档重要由4个标签来组成就是<html>  <head>  <title>  <body> ...

  4. mariadb-my.cnf

    [client]port = 3306socket = /tmp/mysql.sockdefault-character-set=utf8 [mysqld]port = 3306socket = /t ...

  5. [LeetCode&Python] Problem 703. Kth Largest Element in a Stream

    Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...

  6. TIME_WAIT

    前言 请说说你对TCP连接中time_wait状态的理解 解答: 先上TCP的状态变迁图 1. time_wait状态如何产生? 由上面的变迁图,首先调用close()发起主动关闭的一方,在发送最后一 ...

  7. Jdbc来操作事物 完成模拟银行的转账业务

    创建JDBC工具类 package cn.aa4_2.JDBCUtils; import java.io.FileReader; import java.io.IOException; import ...

  8. windows10环境下VMware14中Ubuntu16.04解决如何上网问题

    进入控制面板,网络和Internet,网络连接 点击以太网,查看详细信息 点击属性 --> 共享,允许其他网络-->选择VMnet1 点开虚拟机编辑选项 ,选择 VMNET1 仅主机,其他 ...

  9. eclipse运行无错的ssm项目,迁移到idea出错

    我的报错信息为mapper绑定相关错误,是因为idea在构建项目时,target/classes目录下不存在mapper.xml文件 解决方法: <!-- 在maven中添加以下配置,它的父标签 ...

  10. Python 模块调用的变量与路径

    自己编写的python代码经常需要分模块文件以及包,梳理一下调用顺序.执行顺序.工作路径.函数与变量等 工作路径 首先是工作路径,当模块代码放在统一的包内的时候,其路径和外层的包路径不同,当作为主调用 ...