轮播图前后页面切换按钮交互 - 宽高缩放效果

最新推荐文章于 2022-09-28 09:07:41 发布

小虾Suki

最新推荐文章于 2022-09-28 09:07:41 发布

阅读量1.1k

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/qq_39108466/article/details/77650303

版权

本文介绍了如何通过CSS3实现轮播图切换按钮的交互效果，特别是鼠标悬停时箭头图标大小变换的动画。通过相对和绝对定位以及设置固定宽高，可以实现图标从中间开始变化，而非传统左到右的效果。同时讨论了使用JS控制悬停触发变换以扩大触发区域的方法。

摘要由CSDN通过智能技术生成

轮播图前后页面切换按钮交互
因为不喜欢千篇一律的鼠标悬停改变背景透明度的交互，项目中改写了swiper插件中自带的切换按钮样式，实现鼠标悬停时左右翻页箭头的大小变换交互：

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下幻灯片切换按钮大小变换交互</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .swiper-button-next, .swiper-button-prev {
        position: absolute;
        top: 50%;
        width: 49px;