图集缩放(基于动画transform)

最新推荐文章于 2023-02-08 19:28:38 发布

原创最新推荐文章于 2023-02-08 19:28:38 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

案例专栏收录该内容

17 篇文章

订阅专栏

该博客介绍了如何使用CSS实现一种交互效果：当鼠标悬浮在父元素上时，所有子元素缩小并添加模糊效果；而当鼠标悬停在特定子元素上时，该子元素放大1.3倍并清除模糊效果。示例代码展示了如何通过CSS的`transform`和`filter`属性以及`:hover`选择器来完成这一设计。

效果预览：
transform_06
实现思路：当鼠标悬浮于父元素main的时候，所有的div子元素都缩小并且添加模糊度，且当鼠标悬浮于具体的某个div的时候，当前div放大1.3倍，且清除模糊度。
实现代码：
html

<main>
    <div><img src="/images/2.PNG" alt=""></div>
    <div><img src="/images/4.jpg" alt=""></div>
    <div><img src="/images/dog.jpg" alt=""></div>
</main>

css

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    background-color: #535c68;
    /*控制页面子元素 使其居中显示*/
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    /*控制div子元素使其居中显示*/
    display: flex;
    justify-content: center;
    align-items: center;
}

main div {
    height: 200px;
    width: 200px;
    /*让图片居中显示*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*图片溢出部分隐藏*/
    overflow: hidden;
    transition: all 1s;
}

main div img {
    height: 100%;
}

main:hover div{
    /*当鼠标悬浮时缩放 0.6倍*/
    transform: scale(.6);
    filter: blur(10px);
}

main div:hover {
    /*当鼠标悬浮时缩放 1.6倍*/
    transform: scale(1.2);
    /*清除模糊度*/
    filter: none;
}