<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    body{

      background-color: black;

    }

    div {

      width: 600px;

      height: 200px;

      line-height: 200px;

      font-size: 150px;

      font-weight: bold;

      border: 1px solid red;

      margin:200px auto;

      /*background-color: blue;*/

      color: rgba(255,255,255,0.3);

      /*color:red;*/

      /*

      transparent 100px:前100个像素是透明色

      white：150  透明色到白色的线性渐变为150

      */

      background: linear-gradient(-45deg,transparent 100px ,white 150px,white 180px, transparent 220px);

      background-position: -450px 0;

      background-repeat: no-repeat;

      /*裁剪私有属性 只有文字范围内有背景

      通过测试，写在 background后面才生效

      */

      -webkit-background-clip: text;

      transition: all  5s;

    }

    div:hover{

      background-position: 450px 0;

    }

  </style>

</head>

<body>

<div>

  线性渐变

</div>

</body>

</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. skynet的火焰图

    之前搞过一下systemtap(systemtap折腾笔记),可惜很快琐事缠身,没有继续搞下去.最近偷空搞了一下,有点意思. 章大大的思路,是用perl生成systemtap脚本,从/proc/$pi ...

  2. 《HTTP权威指南》读书笔记（一）

    1.因特网上有数千种不同的数据类型,HTTP仔细地给每种要通过Web传输的对象都搭上了名为MIME类型的数据格式标签.WEB服务器会为所有HTTP对象数据附加一个MIME类型.当Web浏览器从服务器中 ...

  3. web页面弹出窗口代码大全

    //-----------按钮提示框----------// <input type="button" name="btn2" id="btn2 ...

  4. 2.3 i++/i--与++i/--i的运算

    一.i++/i--: i先参与运算,运算完成后自加/减1: public class Test{ public static void main(String[] args){ // [1] ; i+ ...

  5. 配置https and http2 local本地开发环境

    今天,几乎所有你访问的网站都是受HTTPS保护的.如果你还没有这样做,是时候这样做了.使用HTTPS保护您的服务器也就意味着您无法从非HTTPS的服务器发送请求到此服务器.这对使用本地开发环境的开发人 ...

  6. Web前端学习第一天

    1.SQL注入攻击的发生 select username, email ,descl from users where id=1; 可能会被伪造成 1 union select password,1, ...

  7. Alpha阶段个人心得

    在一个学期的学习中,我从一个只会一个人打打小规模代码的初学者也变成了一个能参与到团队做项目的“入门码农”,而我们团队从一开始对大型项目的望而生畏无从下手变成细分任务各司其职,也了解并感受到github ...

  8. 继续写java和socket

    上回书说道,java中通过socket链接的两台计算机可以通过两端的两个Socket对象来读取和发送来自流的信息所以对于客户端和服务端只需要封装一个相同的收发信息的窗口就好 代码如下 package ...

  9. [R] Lexical & Dynamic Scoping / Execution & Calling environments / Closures

    Lexical Scoping :有Java繼承中呼叫子類時先生成父類的概念,呼叫函數後,系統會轉至其定義處,將其 environment 中所具有的東西(有些可能定義在外層)形成 Closure [ ...

  10. java虚拟机的学习书籍推荐

    javaEE开发已然是一个老生常谈的话题了,但经典之所以会成为经典,就是因为有可重复琢磨之处,每一次的反复推敲都会有不一样的收获.如果你不满足于做一个只会写if…else…的Java程序员,而是希望更 ...