CSS之鼠标动画

先看下效果图：

CSS之鼠标动画

首先，我们从效果图上可以看出来我们要做的动画特性，当鼠标放到图片上时，我们的图片会放大，并且图片下方的阴影和字都会消失。

图片是圆角的，字的背景颜色呈现半透明状态。

效果图给我们的直观感受大概就是这些，现在我们一步步来看看制作这个效果的过程。

第一步：我们选择四个图片，用无序列表来放置。并给图片上加上文字。

html代码：

   <li><img src="img/woman.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/man.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/mountain.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/flower1.jpg" alt=""><span>千年之恋</span></li>

你会发现，图片的大小不一样，我们给图片设置同样的宽度，高度可以不用设置，因为它会等比例缩放。

css代码： img{ width: 200px; }

目前为止的效果图如下：

CSS之鼠标动画

可以看到它的排列方向为上下，而我们想要的是一横排，那我们可以使用float：left属性，并且我们也不想要无序列表的默认样式小实心圆，所以我们将li的的list-style设置为none。

代码如下：

li{
    list-style: none;
    float: left;
}

效果图如下：

CSS之鼠标动画

我们发现字没有在图片里面，不是我们想要的样式，图片顺序问题忽略，因为重写代码时，没有按效果图的顺序引用。那我们怎样将文字放在图片里面。接下来的代码将会实现动画前的一步。你会发现在代码里我在img中加了高度的设置，不是会说同比例放大或缩小吗？那是因为我们在消除文字背景和图片底端的一条小缝时，使用了display：flex；flex不适块级元素，因此它无法等比例，所以我们就要设置高度。

在设置圆角时，因为img和span都是矩形，设置圆角后，效果没有显示出来，因为img和span溢出那部分没有隐藏，所以效果没有改变。因此，我们设置了overflow：hidden。隐藏溢出部分。

在设置文字阴影时，我选用了rgba，虽然opacity也会透明，但是它让背景颜色透明的同时让文字也透明了，不是我们想要的结果。因此，我们使用rgba来设置。

li{
    float: left;   /*左右排序*/
    margin: 0 10px;    /*产生间隔*/
    list-style: none;    /*去除默认样式*/
    position: relative;
    display: flex;  /*消除图片与阴影底部的小缝*/
    border-radius: 10px;   /*显示圆角*/
    overflow: hidden;       /*超出部分隐藏圆角效果就可以显示出来（本质块级元素）*/
}

span{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align:center ;
    /*opacity: 0.5;会让字也透明*/
    background: rgba(0,0,0,0.4);
    color: aliceblue;
}

其效果图：

CSS之鼠标动画

最后一步就是动画的设置，我用了transition，我们动画效果是：当鼠标点到图片上的时候，图片会放大，字会消失。放大我们可以使用transform的scale属性。那字消失，我们怎么设置呢？就在我刚刚提到的opacity属性，让它透明化就行。

最终代码如下：

 <style>
        ul,li,img,span{margin: 0;padding: 0;}
        img{
            width: 200px;
            height: 140px;
        }
       li{
            float: left;   /*左右排序*/
            margin: 0 10px;    /*产生间隔*/
            list-style: none;    /*去除默认样式*/
            position: relative;
            display: flex;  /*消除图片与阴影底部的小缝*/
            border-radius: 10px;   /*显示圆角*/
            overflow: hidden;       /*超出部分隐藏圆角效果就可以显示出来（本质块级元素）*/
            transition: all 0.5s;    /*所有标签，执行周期0.5s*/
        }
        li:hover{
            transform: scale(1.1); /*放大1.1倍*/
        }
        span{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align:center ;
            /*opacity: 0.5;会让字也透明*/
            background: rgba(0,0,0,0.4);
            color: aliceblue;
            transition: all 0.5s;
        }
        li:hover span{
            opacity: 0;
        }

    </style>
</head>
<body>
<ul>
    <li><img src="img/flower1.jpg" alt=""><span>千年之恋</span></li>
    <li><img src="img/woman.jpg" alt=""><span>千年之恋</span></li>
    <li><img src="img/man.jpg" alt=""><span>千年之恋</span></li>
    <li><img src="img/mountain.jpg" alt=""><span>千年之恋</span></li>
</ul>
</body>

图：

CSS之鼠标动画

谢谢观看！