响应式图片列表鼠标经过放大效果样式代码

最新推荐文章于 2026-03-07 00:08:56 发布

原创

最新推荐文章于 2026-03-07 00:08:56 发布 · 2.2k 阅读

标签

#CSS3 #响应式 #鼠标 #动画 #布局

收录于

本文介绍了如何使用CSS3的box-sizing、媒体查询和hover属性创建响应式的图片列表。通过设置border-box属性实现百分比布局，结合媒体查询实现不同屏幕尺寸的适配。利用transform: scale()改变元素大小，并通过transition属性添加平滑的动画过渡效果，为鼠标悬停时的图片放大提供流畅的视觉体验。

主要使用CSS3的box-sizing:border-box;属性来设置按照百分比布局的样式。结合媒体查询判断页面宽度设置区块的响应式展示。并添加了一些hover属性的动画过度效果。熟悉transform: scale(1.1); /*鼠标经过放大1.1倍*/，与transition: all 1s ease 0s; /* 所有动画效果执行时间为1秒，默认动画曲线，从0秒开始执行*/。变形动画和过度执行的细节设置。想要执行改变后使用动画过度效果要懂得transition: all 1s ease 0s; 属性的使用。添加该属性才会产生动画效果。

页面结构：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式图片展示</title>
    <link rel="stylesheet" href="style/res.css">
</head>
<body>
    <h2>响应式图片相册</h2>
    <div class="responsive">
        <div class="img">
            <a href="#"><img src="images/photos/a.jpg" alt=""></a>
            <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, maxime, eaque, quas ullam ea optio alias aliquid dolorem vero eum totam dignissimos est. Asperiores, quia eligendi earum possimus modi consequuntur.</