一个CSS+jQuery实现的放大缩小动画效果

/* CSS 部分，用于设置动画和初始状态 */
.zoom-box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    transition: transform 0.5s ease; /* 平滑过渡效果 */
    margin: 20px;
    text-align: center;
    line-height: 100px; /* 使文本垂直居中 */
}

.zoom-in {
    transform: scale(1.5); /* 放大1.5倍 */
}

.zoom-out {
    transform: scale(0.5); /* 缩小0.5倍 */
}

<!-- HTML 部分，用于放置动画元素和按钮 -->
<div class="zoom-box">Hover Me!</div>
<button id="zoomInBtn">Zoom In</button>
<button id="zoomOutBtn">Zoom Out</button>

<!-- 引入 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
// jQuery 部分，用于处理点击事件
$(document).ready(function(){
    $("#zoomInBtn").click(function(){
        $(".zoom-box").addClass("zoom-in");
        setTimeout(function(){
            $(".zoom-box").removeClass("zoom-in"); // 可选：动画完成后移除类以恢复原始大小
        }, 500); // 与CSS中的transition时间相匹配
    });

    $("#zoomOutBtn").click(function(){
        $(".zoom-box").addClass("zoom-out");
        setTimeout(function(){
            $(".zoom-box").removeClass("zoom-out"); // 可选：动画完成后移除类以恢复原始大小
        }, 500); // 与CSS中的transition时间相匹配
    });

    // 也可以添加鼠标悬停效果
    $(".zoom-box").hover(
        function() {
            $(this).addClass("zoom-in");
        }, function() {
            $(this).removeClass("zoom-in");
        }
    );
});
</script>

这个示例展示了如何使用CSS和jQuery来实现一个基本的放大缩小动画效果。CSS部分定义了`.zoom-box`类的初始样式、过渡效果和放大缩小时使用的`transform`属性。jQuery部分则处理了按钮点击事件和鼠标悬停事件，通过动态添加和移除CSS类来改变`.zoom-box`的样式，从而实现放大和缩小的动画效果。注意，在`setTimeout`函数中移除类是为了在动画完成后恢复元素的原始大小，但这步是可选的，取决于你的具体需求。