-1

是否可以在悬停时添加渐变？我想避免使用图像并使用纯 css3。

我有一个带有 backgroundc-color: blue 的简单框，带有一个图标。我想在鼠标悬停时添加渐变效果。

如何在屏幕抓取时获得渐变发光效果？

我试图在下面获得这种效果：

蓝色渐变

4

4 回答 4

2

你可以在 CSS 中做渐变，虽然定义可能有点冗长。这是一个可靠的CSS3 渐变创建器。

然后只需添加一个:hover到您的链接。

.your-link:hover {
 // gradient here
}
于 2013-02-13T23:15:44.617 回答
0

有关 css3 的最佳实践，您可以访问 css3please.com。只需将 :hover 添加到课程中即可满足您的需求：

.box_gradient:hover {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
于 2013-02-13T23:36:19.043 回答
0

我会这样做：

.link:hover {
background-image: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 116, color-stop(1%, #57fdfe), color-stop(100%, #2c95dd));
background-image: -webkit-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -moz-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -ms-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: -o-radial-gradient(center bottom, farthest-side, #57fdfe 1%, #2c95dd 100%);
background-image: radial-gradient(farthest-side at center bottom, #57fdfe 1%, #2c95dd 100%);
}

这是一个完整的示例，您只需复制和粘贴即可，它应该可以工作:) 享受！

请注意，那里有你的颜色和它的径向:)

于 2013-02-13T23:22:40.990 回答
0

这是你要找的东西吗？
显然使用你自己的颜色。

演示

这是CSS：

.blah:hover {
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0198E1), to(#00FFFF));
   background-image: -webkit-linear-gradient(top, #0198E1, #00FFFF); 
   background-image:    -moz-linear-gradient(top, #0198E1, #00FFFF);
   background-image:     -ms-linear-gradient(top, #0198E1, #00FFFF);
   background-image:      -o-linear-gradient(top, #0198E1, #00FFFF);
}
于 2013-02-13T23:22:56.437 回答