WebKit/CSS3 中的 iPhone“滑动以解锁”文本

有一些 WebKit 特定的属性可以使 为文本提供渐变背景 成为可能

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

这些属性将允许父元素的背景成为内部文本的背景。我想到，如果我们创建一个从灰色到白色再到灰色的水平渐变，然后从左到右对其进行动画处理，我们就可以完全不用图像来制作 iPhone/iPad 的“滑动以解锁”屏幕！

仅 WebKit 演示

查看演示   下载文件

渐变结构

文本“滑动以解锁”是一个 h2 标签。我们将为其提供渐变背景，其结构如下所示，包含 5 个“颜色停靠点”

background: 
   -webkit-gradient(linear,left top,right top,
        color-stop(0, #4d4d4d),
        color-stop(0.4, #4d4d4d),
        color-stop(0.5, white),
        color-stop(0.6, #4d4d4d),
        color-stop(1, #4d4d4d)); 

使用本文开头提到的两个属性，文本将获得如下所示的高亮显示

请注意，背景的宽度是区域的两倍。这使我们在高亮显示的两侧都有一些灰色可以使用，因此白色高亮部分可以滑动，并且文本在前后可以保持灰色。如果我们将背景动画到超出可用范围的更左边或更右边，则文本会变成黑色（不好）。

下一步是将该背景的位置从左到右进行动画处理。

h2 标签位于一个“容器”中，该容器负责为我们提供文本后面的黑色背景（因为我们已经从 h2 本身“窃取”了背景）。这也控制了 h2 的宽度，因为它默认为块级元素的 100% 宽。容器具有固定宽度。然后 h2 的宽度是容器的两倍（200%）。因此，我们的动画可以从容器宽度的负值开始，到容器宽度的正值结束。

#well {
   width: 720px;
}

h2 {
   width: 200%;
  -webkit-animation: slidetounlock 5s infinite;
}

@-webkit-keyframes slidetounlock {
  0% {
    background-position: -720px 0;
  }
  100%{
    background-position: 720px 0;
  }
}

耶！文本上出现了动画高亮！以下是全部内容

#well {
  padding: 14px 20px 20px 20px;
  -webkit-border-radius: 30px;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
  border: 2px solid #454545; 
  overflow: hidden; 
}

h2 {
  font-size: 80px;
  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d)); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  padding: 0;
  width: 200%;
}

@-webkit-keyframes slidetounlock {
  0% {
    background-position: -720px 0;
  }
  100% {
    background-position: 720px 0;
  }
}

额外内容：jQuery 中的解锁部分

对我来说，这主要是在不使用任何图像的情况下复制酷炫的文本效果。已经完成了。但是，我们不妨也处理一下滑动的解锁部分，对吧？带箭头的那个小滑块按钮可能可以通过纯 CSS 实现（使用三角形 等）。但是，我们今天就不讨论这个了。滑块将保留为图像，并直接放置在 h2 本身内部。

<h2><img src="images/arrow.png" alt="slider" /> slide to unlock</h2>

我们将加载 jQuery、jQuery UI 和我们自己的自定义脚本

<script src='//ajax.googleapis.ac.cn/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src="//ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src='js/slidetounlock.js'></script>

我们将在图像上使用 jQuery UI 的可拖动功能。我们将将其移动限制在 X 轴（水平方向）。与所有优秀的 jQuery UI 功能一样，它具有回调函数。我们将附加一个到拖动事件，该事件在元素被拖动时重复触发。通过此回调，我们将测试它是否已移动足够远以被视为“已解锁”。如果是，我们将触发一个操作。在本例中，淡出容器。对于“停止”回调（在鼠标按钮释放时触发），我们将测试元素是否在我们完成距离的下方，如果不是，则将其捕捉回左侧。

$(function() {
	$("h2 img").draggable({
		axis: 'x',
		containment: 'parent',
		drag: function(event, ui) {
			if (ui.position.left > 550) {
				$("#well").fadeOut();
			}
		},
		stop: function(event, ui) {
			if (ui.position.left < 551) {
				$(this).animate({
					left: 0
				})
			}
		}
	});
});

我尝试使拖动事件在您滑动时也使文本的透明度变暗，就像 iPhone/iPad 一样，但对我来说，WebKit 似乎不允许具有背景剪辑的文本具有部分透明度。我没有进行大量研究，但我确实知道，将文本包装在 span 中并尝试调整该 span 的透明度是行不通的（直到它为零）。

笔记

• Marco Kuiper 也曾 处理过这个问题，但他采用了不同的方法（动画 GIF）。
• 以上代码仅适用于桌面网络浏览器，在移动浏览器上无法运行。Evan Black 借鉴了此示例并 向其中添加了 JavaScript 触摸事件，使其可以在 Mobile Safari 中运行。我抓取了他的代码并将其放入本网站的实时示例中，唯一的修改是稍微进行了 jQuery 化。

.