利用scale()来制作一个图集

最新推荐文章于 2022-06-04 23:22:44 发布

品风 ₯ 未醉

最新推荐文章于 2022-06-04 23:22:44 发布

阅读量192

点赞数

分类专栏： js+html+css的小练习

本文链接：https://blog.csdn.net/weixin_48342617/article/details/121037057

版权

CSS 滤镜悬停效果图片放大交互设计

关键词由CSDN通过智能技术生成

js+html+css的小练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

视频效果：

图集

思路： 当鼠标放到外层盒子上面时，所有的都盒子缩小，，但当鼠标停在某一具体的图片上时，将该具体盒子放大，，并加上滤镜效果，根据层叠的规则改样式的级别更高，所以会先呈现放大的效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 先调整好图片的大小 */
    main div img{
        width: 150px;
        height: 150px;
    }
    /* 设置好body的大小然后将main居中 */
    body{
        width: 100vw;
        height: 100vh;
        display: flex;
        /* 将内容居中 */
         justify-content: center;
        align-items: center;
        background-color: #16a085;
    }

    /* 设置main为弹性布局 */
    main{
        display: flex;
    }
    main div img{
        height: 100%;
    }
    /* 鼠标放在div上面时，将里面的div都缩小 */
    main:hover div{
        /* 当鼠标悬浮在main上时整个盒子缩小 */
        transform:scale(0.6);
        /* 加上滤镜效果 */
        filter: blur(25px);
        box-sizing: border-box;
    }
    main div{
        border: 2px solid #8e44ad;
        /* 调整好边距 */
         margin-right: 20px;
         /* 加上一个过渡时间 */
         transition: 1s;
   }

  
   /* 当悬浮main上的同时悬浮在某个固定div上时某个div上面时该div放大 */
   /* 因为这里的级别更高所以执行这里 */
   main:hover div:hover{
       /* 清除滤镜效果 */
    filter:none;
    /* 放大 */
    transform:scale(1.2);
   }
</style>
<body>
    <main>
        <div><img src="./图片/1.jpeg" alt=""></div>
        <div><img src="./图片/2.jpeg" alt=""></div>
        <div><img src="./图片/3.jpeg" alt=""></div>
    </main>
</body>
</html>

需要掌握的知识点：

滤镜效果：filter: blur(25px);
图片缩放变形： transform:scale();

品风 ₯ 未醉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用scale()来制作一个图集

视频效果：思路：当鼠标放到外层盒子上面时，所有的都盒子缩小，，但当鼠标停在某一具体的图片上时，将该具体盒子放大，，并加上滤镜效果，根据层叠的规则改样式的级别更高，所以会先呈现放大的效果代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫

专栏目录