鼠标悬停时动画_在悬停时创建菜单图像动画

鼠标悬停时动画

View demo 查看演示 Download Source 下载源

At Codrops, we love experimenting with playful hover effects. Back in 2018, we explored a set of fun hover animations for links. We called that Image Reveal Hover Effects and it shows how to make images appear with a fancy animation when hovering items of a menu. After seeing the fantastic portfolio of Marvin Schwaibold, I wanted to try this effect again on a larger menu and add that beautiful swing effect when moving the mouse. Using some filters, this can also be made more dramatic.

在Codrops，我们喜欢尝试有趣的悬停效果。 早在2018年，我们就探索了一组有趣的悬停动画以获取链接。 我们将其称为“图像显示悬停效果” ，它展示了如何在悬停菜单项时使图像以精美的动画出现。 看完Marvin Schwaibold出色的作品集之后，我想在更大的菜单上再次尝试这种效果，并在移动鼠标时添加漂亮的摇摆效果。 使用一些过滤器，这也可以变得更加生动。

If you are interested in other similar effect, have a look at these:

如果您对其他类似效果感兴趣，请查看以下内容：

• Image Trail Effects

  图像轨迹效果

• Image Distortion Effects with SVG Filters

  SVG滤镜的图像失真效果

• Image Dragging Effects

  图像拖曳效果

So, today we’ll have a look at how to create this juicy image hover reveal animation:

因此，今天我们来看看如何创建多汁的图像悬停展示动画：

一些标记和样式 (Some Markup and Styling)

We’ll use a nested structure for each menu item because we’ll have several text elements that will appear on page load and hover.

我们将为每个菜单项使用嵌套结构，因为我们将在页面加载和悬停时显示几个文本元素。

But we’ll not go into the text animation on load or the hover effect so what we are interested in here is how we’ll make the image appear for each item. The first thing I do when I want to make a certain effect is to write up the structure that I need using no JavaScript. So let’s take a look at that:

但是我们不会在加载或悬停效果上使用文本动画，因此我们感兴趣的是如何使图像显示在每个项目上。 当我想产生某种效果时，我要做的第一件事就是不用JavaScript来编写所需的结构。 因此，让我们看一下：

<a class="menu__item">
    <span class="menu__item-text">
        <span class="menu__item-textinner">Maria Costa</span>
    </span>
    <span class="menu__item-sub">Style Reset 66 Berlin</span>
    <!-- Markup for the image, inserted with JS -->
    <div class="hover-reveal">
        <div class="hover-reveal__inner">
            <div class="hover-reveal__img" style="background-image: url(img/1.jpg);"></div>
        </div>
    </div>
</a>

In order to construct this markup for the image, we need to save the source somewhere. We’ll use a data attribute on the menu__item, e.g. data-img="img/1.jpg". We’ll go into more detail later on.

为了构造图像的标记，我们需要将源保存在某个地方。 我们将在menu__item上使用data属性，例如data-img="img/1.jpg" 。 稍后我们将详细介绍。

Next, we’ll have some styling for it:

接下来，我们将对其进行一些样式设置：