HTML-缩放案列

最新推荐文章于 2024-01-10 22:01:21 发布

石锅W

最新推荐文章于 2024-01-10 22:01:21 发布

阅读量126

点赞数

分类专栏： html 笔记文章标签： css html html5

本文链接：https://blog.csdn.net/m0_52047345/article/details/120229725

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

笔记

1 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用CSS实现图片列表的布局，并通过:hover伪类实现鼠标悬停时图片的缩小和透明度变化效果。利用transform:scale()进行2D变换，配合transition属性平滑过渡，以及opacity属性控制透明度，为网页交互增加动态视觉体验。

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

<body>
    <div class="box">
        <ul>
            <li><img src="../images/1.jpeg" alt=""></li>
            <li><img src="../images/2.jpeg" alt=""></li>
            <li><img src="../images/3.jpeg" alt=""></li>
            <li><img src="../images/4.jpeg" alt=""></li>
            <li><img src="../images/5.jpeg" alt=""></li>
            <li><img src="../images/6.jpeg" alt=""></li>
    
        </ul>
    </div>
</body>

css样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }

        .box {
            width: 860px;
            height: 450px;
            background-color: #666;
            margin: 80px auto 0;
        }
        .box ul li {
            float: left;
            margin-left: 25px;
            margin-top: 20px;
            /* 鼠标经过变成小手 */
            cursor: pointer;
        }
        .box ul li img {
            width: 255px;
            height: 195px;
            /* opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。 */
            opacity: 0.9;
        }

        .box ul li:hover img {
            /* 2D转换  scale就是中心为原点缩放50%   transform: scale(50%，50%); */
            transform: scale(0.5,0.5);

            transition: all 1s;

            opacity: 1;
        }
    </style>