CSS动画案例5

一、介绍

本节内容我们继续来讲解一下，css当中的动画案例，如下图所示：
在这里插入图片描述

首先呢就是划入以后图片渐变为另外一张图片，并且有放大效果，第二个效果是划入以后下面的价格隐藏，出现标题，第三个就是划入描述文字以后文字变为红色。

二、静态页面的布局

首先我们可以通过上面的图片可以看到中间部分是需要上下滚动的，所以需要定位，设置层级。
在这里插入图片描述

1.HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><!-- 最外层盒子 --><div class="item"><!-- 包裹着图片的盒子 --><div class="img"><!-- 默认展示的图片 --><img src="http://www.jqueryfuns.com/view/2021/6/11/5394360ac50eb11fbd73eff2c6f2c81e/img/product/5.jpg"alt="" class="goods1"><!-- 划入以后展示的图片，使用定位，与透明度让其划入后显示 --><img src="./test2/01_test/img/1.jpg" alt="" class="goods2"></div><!-- 位于上方固定不动的标题 --><div class="title"><div><p>Woman</p><span>Light green crewneck sweatshir</span></div></div><!-- 需要滚动的价格，位于固定不动的标题下方 --><div class="price"><span>Quick View</span><p>$58.00</p><p class="add">+Add To Cart</p></div></div>
</body>
</html>

2.CSS

 <style>
/*        设置最外层盒子的宽和高，以及定位，让其超出隐藏*/.item {width: 317px;height: 480px;position: relative;overflow: hidden;}
/*        设置包着图片的盒子的宽与高*/.img {width: 100%;height: 375.6px;
/*            设置他的定位*/position: absolute;
/*            让其溢出隐藏，因为鼠标划入以后有一个图片放大的效果*/overflow: hidden;
/*            设置层级*/z-index: 1;}
/*        设置内部图片的宽为父级100%，高度自适应*/.img>img {width: 100%;}
/*        设置第一张图片的位置*/.goods1 {position: absolute;top: 0;}
/*        设置第二张图片的位置*/.goods2 {position: absolute;top: 0;
/*            让其透明度为0，不显示*/opacity: 0;}
/*        设置最上面的标题，宽高以及背景颜色*/.title {width: 100%;height: 50px;background-color: white;
/*            设置他的位置*/position: absolute;
/*            距离顶部376px*/top: 376px;
/*           设置内边距*/padding: 10px;
/*            让其形成BFC*/box-sizing: border-box;
/*            设置字体的颜色，字体的大小*/color: rgb(128, 127, 127);font-size: 12px;
/*            设置层级，让其位于最高层*/z-index: 3;}.title>div>p {
/*            设置标题距离下面描述内容的距离*/margin-bottom: 5px;}.title>div>span {
/*            设置描述内容字体颜色*/color: #333;}
/*        设置价格的盒子*/.price {
/*            设置宽和高，背景颜色*/width: 100%;height: 164px;background-color: rgba(255, 255, 255, .3);
/*            让其层级为2，位于最高层的下面*/z-index: 2;
/*            设置定位*/position: absolute;
/*            距离底部的距离*/bottom: -57px;
/*            设置字体居中*/text-align: center;
/*            设置行高*/line-height: 38px;
/*            设置字体颜色*/color: rgb(105, 105, 105);
/*            设置内边距*/padding: 10px;
/*            让其成为一个BFC盒子*/box-sizing: border-box;}.price>p {text-align: left;font-size: 14px;}.add {position: relative;margin-top: 20px;}
/*        使用伪元素设置ADD字符下的横线*/.add::after {content: "";width: 95px;height: 2px;background-color: #868686;display: block;position: absolute;top: 28px;left: 0;}

那么至此我们静态页面的布局就完成了。主要原理就是，我们通过使用定位，来实现一个遮挡关系，分为上中下三层，最高层就是标题以及商品的一个描述，这个是固定不变的，中间层是需要上下移动的，所以一定会超出最大层盒子的范围，需要进行溢出隐藏。
那么我们的静态布局就成了下图所示：
在这里插入图片描述

三、设置交互效果

 .goods2 {position: absolute;top: 0;
/*            让其透明度为0，不显示*/opacity: 0;
/*            设置过渡，使其划入以后更加自然*/transition: all 2s;}
.price {
/*            设置宽和高，背景颜色*/width: 100%;height: 164px;background-color: rgba(255, 255, 255, .3);
/*            让其层级为2，位于最高层的下面*/z-index: 2;
/*            设置定位*/position: absolute;
/*            距离底部的距离*/bottom: -57px;
/*            设置字体居中*/text-align: center;
/*            设置行高*/line-height: 38px;
/*            设置字体颜色*/color: rgb(105, 105, 105);
/*            设置内边距*/padding: 10px;
/*            让其成为一个BFC盒子*/box-sizing: border-box;
/*            设置过渡，让其划入时更加自然*/transition: all .8s;}/* 鼠标划入以后让第二张图片，透明度为1，显示出来*/.img:hover>.goods2 {opacity: 1;
/*            设置图片放大1.1倍*/transform: scale(1.1);}
/*        设置划入以后文字的颜色为红色*/.title>div>span:hover {color: red;}
/*        设置第二层价格的距离底部的距离让其向上滚动*/.item:hover>.price {bottom: -3px;}