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

最新推荐文章于 2022-11-17 20:39:02 发布

天地无边

最新推荐文章于 2022-11-17 20:39:02 发布

阅读量2.1k

点赞数 3

分类专栏： css 文章标签： CSS3 响应式鼠标动画布局

本文链接：https://blog.csdn.net/u011848751/article/details/73469330

版权

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

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

主要使用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, e

最低0.47元/天解锁文章

天地无边

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
响应式图片列表鼠标经过放大效果样式代码

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

扫一扫

专栏目录