基于CSS动画、伪类选择器的图片展示效果

引言

在现代网页设计中，动态交互效果是吸引用户注意力的重要手段。通过 CSS 的动画和过渡属性，我们可以轻松实现平滑的视觉变化，从而提升用户体验。今天，我将为大家分享一个图片展示效果案例，详细解析如何利用 CSS 的 transition 和伪元素等技术，打造出兼具美感和功能性的图片展示组件。

实现过程

确定实现效果

图片放大效果： 当用户将鼠标悬停在图片上时，图片会平滑放大，营造出视觉焦点。
渐变背景叠加： 通过伪元素添加渐变背景，增强图片的视觉冲击力。
背景图片缩放： 隐藏的背景图片会在鼠标悬停时显现并放大，增加层次感。

实现思路

对于单一图片： 通过创建div容器，设置宽高。使用img标签将图片嵌套在div中。观察大部分的网页，能够发现，网页的大部分图片都能够跳转、加载页面。因此先用a标签将img包住（要将a的display设为块级block），再嵌套在div中。（根据具体的需求来设计）接着创建伪类选择器来实现渐变背景，在对用的类后面加上：：before。设计伪类选择器时，不管要不要显示什么内容，都要加上content=‘’，只有加上content这个属性该伪类选择器才能正常使用。给伪类选择器添加绝对定位，沾满整个a标签;给伪类的父级div添加相对定位（position=‘relative’）。添加完定位，设置层级，要大于img的层级，该伪类才能在图片的位置上显示，否则会被覆盖。接着使用 background: linear-gradient(tox1, y1, y2）在伪类选择器上设计颜色的渐变,x1为颜色渐变的方向，y1、y2为颜色，表示由y1颜色渐变到y2颜色。将伪类的透明度设为0，并添加transition属性，使得伪类由透明度0到1能够显示得平顺。接着添加鼠标悬停效果，将伪类的透明度设置为1，就能够实现背景颜色渐变的效果。实现颜色渐变效果的同时，img图片也要进行相对的放大，对img添加鼠标悬停
效果，使用transform: scale(z)，来放大图片，x为缩放倍数（1为原图大小）。此时能够实现图片的缩放与背景颜色的渐变。然而对于其它网站，如有关音乐的网站，在鼠标悬停到图片时，有播放按钮的呈现。可以通过创建div，对其设置背景图片，并采用绝对布局，将其缩放一定倍数，再将其透明度设为0。对其添加悬停效果，将透明度设为1，并放大一定倍数。从而实现播放按钮的呈现

针对多张图片： 图片的展示效果原理与单一图片一样，关键在于图片的布局。可以通过创建大的div容器，接着使用无序列表ul，对ul采用flex布局，使其能够水平排列，再对其 flex-wrap属性设为wrap，使得在超出容器的宽度时，能够换行。最后再将存放单一图片的容器放置li中

主要代码分析

伪类选择器：

 .dd3 .dd34 a::before{
            content: " ";
            /*绝对布局*/
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            /*颜色渐变*/
            background: linear-gradient(to bottom right,  rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)) ;
            /*透明度*/
            opacity: 0;
            /*层级*/
            z-index: 1;
            transition: opacity 0.5s ,transform 0.5s ;
        }

悬停代码：

	/*图片缩放*/
  	.uul li .dd3 .dd34:hover  a img{
           
            transform: scale(1.2);
        }
        /* 背景图片放大（按钮）*/
        .uul li .dd3 .dd34:hover  .dd4{
            opacity: 1;
            transform: scale(0.3);
        }
        /*颜色渐变*/
	 .dd3 .dd34 a:hover::before{
            opacity: 1;
        }
       

布局结构：

<div class="dd1">
        <div class="dd2">
            <ul class="uul">
                <li>
                    <div class="dd3">
                        <div class="dd34">
                            <a href=""><img src="./m01.jpg" alt="">a>
                            <div class="dd4">div>
                        div>
                        
                        <h4><span><a href="">拉黑你的唇，删除你的吻a>span>h4>
                    div>
                li>
                
                
                
            ul>
        div>
    div>

效果演示