css 渐变蒙版_CSS渐变，变换，动画和蒙版

css 渐变蒙版

由于CSS工作组似乎很费事，无法确定在实际浏览器中可能永远无法实现的规范的确切用语，因此WebKit团队将通过实现您将要实现CSS新功能来引领网络向前发展短短几个月即可投入生产。

每个浏览器都包含一个渲染引擎，负责从组成给定网页HTML和CSS代码生成渲染页面。 WebKit是苹果Safari浏览器（更不用说最新的诺基亚手机和Adobe AIR平台）的核心渲染引擎。 您可以下载最新的WebKit进行中版本以进行试用。

对CSS的未来感兴趣的Web设计人员有很好的理由立即下载WebKit。 该团队介绍了一些惊人CSS新功能，Apple计划在今年6月发布的iPhone和iPod touch的Mobile Safari 2.0更新中发布这些功能。 据推测，我们可以预期同时将Mac OS X和Windows的Safari桌面版更新。

以下是到目前为止宣布的功能及其作用的摘要：

CSS渐变

CSS渐变使您可以使用颜色到颜色的渐变而不是纯色来填充区域（包括背景，边框和生成的内容）。

右图显示了几个可以实现的效果示例。 在顶部图像中，四个径向（圆形）渐变在单个背景中组合在一起以产生色彩鲜艳的效果。 在底部图像中，单个线性渐变从蓝色开始垂直运行，然后逐渐变为白色，然后变为绿色，然后再次变为白色。

要生成渐变，可以在通常会在CSS代码中包含图像的任何地方使用-webkit-gradient CSS函数。 这是产生线性，蓝色和绿色渐变背景的方式：

background: -webkit-gradient(linear, left top, left bottom,
    from(#00abeb), to(#fff), color-stop(0.5, #fff),
    color-stop(0.5, #66cc00));

可以在WebKit博客上找到此新功能的完整说明 ，以及可以检出的更多示例。 当然，您需要下载WebKit才能看到它们。

CSS转换

CSS转换的工作方式非常类似于CSS相对定位（所有主流浏览器都支持CSS相对定位），因为它可以让您修改页面的一部分而不影响页面的布局。 通过相对定位，如果将元素向左移动500像素，则该元素将以其新位置显示，但仍将占据其最初所在页面中的空间。

使用CSS转换，您可以像使用相对定位一样移动元素，但是您也可以缩放，旋转甚至倾斜元素。

在此屏幕截图中，我使用了CSS转换将sitepoint.com的整个页面旋转了两个角度。 特别引人注目的是，在完成转换后，所有文本仍然是可选的，并且您仍然可以使用页面顶部的搜索表单。

执行此操作的代码很简单：

body {
  -webkit-transform: rotate(-2deg);
}

如果下载WebKit，则只需在位置栏中键入以下代码即可（在一行上），您可以在任何页面上自行尝试：

javascript:_=document.body.style;_.WebkitTransformOrigin='100%%200%';_.WebkitTransform='rotate(-2deg)'

WebKit博客对此功能进行了很好的总结 ，并且该团队还发布了初步的规范草案 ，以供W3C考虑。

CSS过渡

一旦开始使用CSS，您很快就会学到一些内容，即当用户将鼠标悬停在超链接上时如何更改超链接的外观。 例如，此代码会将链接的文本从蓝色更改为白色：

a:link, a:visited {
  color: #00f;
}
a:hover {
  color: #fff;
}

使用少量JavaScript，您可以随时更改，只需更改分配给元素的类即可。

CSS Transitions可让您平滑地对这些更改进行动画处理。 它可以使链接文本从蓝色平滑过渡为浅蓝色，最后变为白色，而不是将鼠标悬停时链接文本的颜色从蓝色突然变为白色：

a:link, a:visited {
  color: #00f;
  -webkit-transition: color 1s linear;
}
a:hover {
  color: #fff;
}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

您可以将转换与CSS转换结合使用，以实现一些真正令人兴奋的效果。 在此屏幕截图中，我修改了sitepoint.com上的主导航栏，以将鼠标悬停在站点上的主导航按钮上以放大并略微旋转。 使用CSS过渡时，当鼠标经过按钮时，按钮会平滑地增长和倾斜，然后在鼠标离开时按钮会收缩回到原位。

除了看起来很漂亮之外，这种效果还具有使链接更易于单击的附加优势。

WebKit团队已经提交了CSS过渡规范草案 ，供W3C考虑，并且WebKit博客上有一篇不错的文章，其中包含一些示例 ，您可以在WebKit中尝试这些示例 。

CSS蒙版

今天刚刚宣布，WebKit现在还支持CSS masks 。 如果您曾经使用过诸如Photoshop之类的图形程序，则将熟悉遮罩的概念。 本质上，遮罩使您可以使HTML元素的某些部分半透明或完全不可见。

在WebKit博客右侧的示例中，将带有黑色边框的红色圆圈的SVG图像用作蒙版，应用于照片。 请注意，由于黑色边框的缘故，照片的全彩如何通过蒙版沿圆圈的边缘显示。

标准CSS opacity属性实际上是应用于整个元素的纯色蒙版。 使用CSS遮罩，您可以应用图像，SVG矢量形状甚至CSS渐变作为遮罩，以实现不同的效果。 与所有WebKit的新CSS效果一样，遮罩也非常强大。 您可以将它们应用于任何复杂HTML元素，包括表单字段甚至视频！

当今CSS的未来

多年来，网页设计师一直在关注W3C规范，以告诉他们他们对未来浏览器的期望。 但是，由于W3C在这方面的努力已停滞不前，诸如Safari，Opera和Firefox之类的尖端浏览器已经通过为设计师提供新功能来尝试来弥补这一不足。

与任何新功能一样，评审团仍然无法确定许多新功能在现实中的有用性。 特别是在动画过渡的情况下，滥用的可能性非常大。 为此，我们在未来看到创建的每一个细微和美观效果，我们可能会看到五个或十个这些 （WebKit的看到效果需要）。

的确，我们很快将无法依赖大多数浏览器中提供的上述任何功能，但现实世界中的实现将在短短几个月内实现。 这是W3C多年来生产的大多数CSS3规范所不能比的。

为了跟上这些以及其他新CSS功能进入WebKit的步伐（例如CSS变量 ， CSS画布绘制和CSS关键帧动画 ），请访问WebKit团队的Surfin的Safari博客 。

翻译自: https://www.sitepoint.com/css-gradients-transforms-animations-and-masks/

css 渐变蒙版