Question

所以我在我的主页上设置了背景图片网址。

我想知道如何在背景网址的特定部分上创建悬停光泽效果。

我很想知道这是否可以实现，因为我没有设计任何锚元素。

home.html.erb

<%= content_for :head do %>
  <%= stylesheet_link_tag "home" %>
<% end %>

<div class="jumbotron center">
    <h1>Japanese and South Korean luxury Skincare!</h1>
    <p>
      <%= link_to "MOISTURISERS", pins_path, class: "btn btn-pink btn-lg" %>
      <%= link_to "CLEANSERS", "#", class: "btn btn-info btn-lg" %>
      <%= link_to "TREATMENTS", "#", class: "btn btn-info btn-lg" %>
    </p>    
</div>

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>SampleApp</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => false %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
  <%= csrf_meta_tags %>
  <%= yield :head %>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700|Lobster' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <%= render 'layouts/header' %>
    <div class="container">
    <% flash.each do |name, msg| %>
     <%= content_tag(:div, msg, class: "alert alert-#{name}") %>
    <% end %>
    <%= yield %>
    </div>

</body>
</html>

Answer 1

您可以使用某种带渐变的关键帧动画来实现某种光泽效果。改变animation时间将允许更快/更慢的动画持续时间，并且关键帧也可以自己改变以提供更合适的效果。

.background-image {
  height: 300px;
  width: 100%;
  background: url('https://photos-1.dropbox.com/t/2/AABgjS7Qy1ic5R5qfrZQcPI9l9zi6Xg37V-MANnf8Hs8VQ/12/80984193/png/32x32/3/1460995200/0/2/japan%20copy.png/EKmAgD8YmrAEIAIoAg/ykSKOOMwapsQ0k9ROiKzlp3-lDFikK1tmVaOI_cdDs0?size_mode=3&size=1600x1200');
  background-size:100% 100%;
  position: relative;
  overflow:hidden;
}
.shine {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 300px;
  border-radius:50%;
  width: 300px;
  background: linear-gradient(-45deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  opacity:0;
}
.background-image:hover .shine{
  animation: shine 1s linear forwards 1;
  }
@keyframes shine {

  0% {
    opacity: 0;
    display: inline-block;
    top: 50%;
    left: 50%;
  }
  80% {
    opacity: 1;
    top: 25%;
    left: 25%;
  }
  100% {
    opacity: 0;
    display: inline-block;
    top: 0%;
    left: 0%;
  }

}

<div class="background-image">
  <span class="shine"></span>
</div>

^{为清晰起见，已删除供应商前缀。}

如何在后台URL的特定部分创建悬停光泽效果

1 个答案: