如何在背景網址的特定部分上創建懸停光澤效果

Question

因此，我在首頁上設置了背景圖片網址。

我想知道如何在背景url的特定部分上創建懸停光澤效果。

考慮到我沒有設置任何錨元素的樣式，我很想知道這是否可以實現。

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>

^{為了清楚起見，已刪除了供應商前綴。}

如何在背景網址的特定部分上創建懸停光澤效果

問題描述

1 個解決方案

解決方案1
3 2016-04-18 11:02:18

如何在背景網址的特定部分上創建懸停光澤效果

問題描述

1 個解決方案

解決方案1 3 2016-04-18 11:02:18

解決方案1
3 2016-04-18 11:02:18