重新创建NetLify＆＃039;巧妙的滑动按钮效果

Netlify官网的下载按钮设计简洁而优雅，吸引眼球又不显突兀，其交互效果尤其令人印象深刻：鼠标悬停时，按钮扩展并显示“Download”字样。 我注意到Safari浏览器下显示略有差异，这激发了我探究其实现方式的兴趣。因此，我尝试复现了该效果，并对间距进行了优化。

其核心技术在于四个方面：

• 利用left属性控制“Download”标签的显示和隐藏。
• 利用按钮悬停状态下的padding属性为“Download”标签腾出空间。
• 在按钮悬停状态下声明scale(1, 1)，确保内容在移动时保持完整。
• 使用transition属性对按钮的padding、背景图片位置(background-position)和transform属性进行动画过渡，实现流畅的动画效果。

以下是不包含样式的代码示例，更清晰地展现其原理：

如果难以理解其运作方式，下图展示了“Download”标签如何通过overflow: hidden隐藏在按钮之外，以及鼠标悬停时如何将其推入视野。

通过为图标和“Download”标签设置负的left值，将其隐藏，然后在鼠标悬停整个按钮时将其重置为正值。

/* 默认状态 */
.button {
    background: 
      #f6bc00 
      url(data:image/svg xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

/* 悬停状态 */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

需要注意的是，仅此状态下，图标会滑入视野，并为“Download”标签留出足够空间，但标签会在悬停时漂浮在按钮之外。

这时，在按钮上添加scale(1, 1)可以保持内容完整。

/* 悬停状态 */
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
  transform: scale(1, 1);
}

padding值是经验值，会根据字体、字号等因素而变化。

最后，transition属性使动画过渡平滑，提升用户体验。

/* 默认状态 */
.button {
    background: 
      #f6bc00 
      url(data:image/svg xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
    transition: padding .2s ease, background-position .2s ease, transform .5s ease;
}

添加一些细节修饰，如圆角等，即可得到一个精美的按钮。

以上是重新创建NetLify＆＃039;巧妙的滑动按钮效果的详细内容。更多信息请关注PHP中文网其他相关文章！