CSS3+JavaScript实现炫酷呼吸效果的示例代码

2023年6月11日上午12:41 • JavaScript

下面是我对于“CSS3+JavaScript实现炫酷呼吸效果的示例代码”的完整攻略，希望能对你有所帮助。

1.准备工作

在开始之前，我们需要先准备好相关的素材。首先是一个由多张逐渐透明的png图片组成的呼吸动画效果，还需要一个 HTML 文件和一个 CSS 文件。我们还需要在 HTML 文件中引入 jQuery 库和 CSS 文件。

下面是一个示例的 HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>呼吸效果</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="pulse">
            <img src="http://cdn.jsdelivr.net/gh/mirrormirage0/img-storage/breathe_01.png">
        </div>
        <script src="index.js"></script>
    </body>
</html>

2.CSS 样式

接着我们要写一些 CSS 样式来使这个动画看起来更炫酷。

.pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}

.pulse img {
    width: 150px;
    height: 150px;
}

.pulse.active img {
    animation: breathe 2s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

@keyframes breathe {
    0% {
        transform: scale(0);
    }
    25% {
        transform: scale(1);
    }
    75% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

上述代码的意思是，我们首先使用绝对定位的方法将包裹图片的容器居中显示，然后通过transform属性对其进行缩放。接着，我们为这个容器添加了一个active的类，这个类将在 JavaScript 中被用到。当这个类被激活时，我们将启用animation动画，并设置一些呼吸效果的细节参数。

3.JavaScript 代码

最后，我们需要使用 JavaScript 添加一些 DOM 操作来控制呼吸动画的执行。

$(".pulse").on("animationend", function() {
     $(this).removeClass("active");
});

$(".pulse").on("mouseover", function() {
     $(this).addClass("active");
});

上述代码的意思是，我们为呼吸容器添加了两个事件。当动画执行完毕时，我们将容器的类名从active移除，停止呼吸动画的执行。当鼠标悬停在容器上时，我们会为其添加active类，使呼吸动画执行。

4.示例说明

接下来，我们将通过两个示例说明如何在实际中应用这个效果。

示例一：应用在导航菜单上

我们可以将呼吸效果应用在网站的导航菜单上。当用户悬停在链接上时，链接周围的边框将开始呼吸，这可以帮助用户在导航菜单中快速找到他们需要点击的地方。

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

.nav li {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #333;
    margin-right: 10px;
}

.nav li.active {
    animation: breathe 2s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
    border-color: #ff6699;
}

.nav li:hover {
    animation: none;
}

.nav li:hover, .nav li.active {
    cursor: pointer;
}

$(".nav li").on("animationend", function() {
     $(this).removeClass("active");
});

$(".nav li").on("mouseover", function() {
     $(this).addClass("active");
});

示例二：应用在用户头像上

我们还可以将呼吸效果应用在用户头像上。当用户悬停在头像上时，头像的边框会呼吸效果，提高页面的交互性。

<div class="avatar">
    <img src="http://cdn.jsdelivr.net/gh/mirrormirage0/img-storage/avatar.png">
</div>

.avatar {
    margin: 20px auto;
    width: 200px;
    height: 200px;
    border: 10px solid #333;
    border-radius: 50%;
}

.avatar.active {
    animation: breathe 2s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
    border-color: #ff6699;
}

.avatar:hover {
    animation: none;
}

.avatar:hover, .avatar.active {
    cursor: pointer;
}

$(".avatar").on("animationend", function() {
     $(this).removeClass("active");
});

$(".avatar").on("mouseover", function() {
     $(this).addClass("active");
});

以上就是使用 CSS3 和 JavaScript 实现炫酷呼吸效果的攻略了，希望可以给你提供一些帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3+JavaScript实现炫酷呼吸效果的示例代码 - Python技术站