图集缩放(基于动画transform)

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果预览:
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;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值