CSS3之实现光润效果
- <!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之实现光润效果的更多相关文章
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- CSS3实现时间轴效果
原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...
- 用css3实现各种图标效果
原文:用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最 ...
随机推荐
- java变量的自动提升与强制转换
所有的byte型.short型和char的值将被提升到int型 一个字节可以提升为4个字节 4个字节不可以降为一个字节 强制转换4个字节转换为一个字节 [丢失精度] byte b = 3; b = ( ...
- 事务的ACID特性(转)
ACID特性 数据库中的事务(Transaction)有四个特性,分别是:原子性(Atomicity),一致性(Consistency),隔离性(lsolation),持久性(Durability) ...
- HTML标记语言
一.html的文档结构 html含义为超文本标记语言,html文档重要由4个标签来组成就是<html> <head> <title> <body> ...
- mariadb-my.cnf
[client]port = 3306socket = /tmp/mysql.sockdefault-character-set=utf8 [mysqld]port = 3306socket = /t ...
- [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 ...
- TIME_WAIT
前言 请说说你对TCP连接中time_wait状态的理解 解答: 先上TCP的状态变迁图 1. time_wait状态如何产生? 由上面的变迁图,首先调用close()发起主动关闭的一方,在发送最后一 ...
- Jdbc来操作事物 完成模拟银行的转账业务
创建JDBC工具类 package cn.aa4_2.JDBCUtils; import java.io.FileReader; import java.io.IOException; import ...
- windows10环境下VMware14中Ubuntu16.04解决如何上网问题
进入控制面板,网络和Internet,网络连接 点击以太网,查看详细信息 点击属性 --> 共享,允许其他网络-->选择VMnet1 点开虚拟机编辑选项 ,选择 VMNET1 仅主机,其他 ...
- eclipse运行无错的ssm项目,迁移到idea出错
我的报错信息为mapper绑定相关错误,是因为idea在构建项目时,target/classes目录下不存在mapper.xml文件 解决方法: <!-- 在maven中添加以下配置,它的父标签 ...
- Python 模块调用的变量与路径
自己编写的python代码经常需要分模块文件以及包,梳理一下调用顺序.执行顺序.工作路径.函数与变量等 工作路径 首先是工作路径,当模块代码放在统一的包内的时候,其路径和外层的包路径不同,当作为主调用 ...