css3实现过渡transition动画效果

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

例如在小米商城中，鼠标移到盒子上，会有一个缓慢出现的阴影，使用的就是transition属性；

鼠标没放在图片上面的情况

鼠标放在上面的情况



鼠标放上图片 从上面变成下面这样

<style>
.trans {
    margin: 200px auto;
    width: 70px;
    height: 50px;
    border: 1px solid red;
    background-image: url('./Snipaste_2021-11-29_16-30-00.png');
    background-position:left top; // 这是原本图片的位置
    transition: background-position 1s, box-shadow 1s linear; // 这里是写要做过渡效果的元素 或者用all 1s 表示全部需要过渡的元素
}
.trans:hover {
    background-position:right top; // 这是鼠标放上去之后改变图片后的位置
    box-shadow: 0 15px 30px rgb(0 0 0 / 20%); // 这是鼠标放放上去之后新增的阴影效果
}
</style>

原本的图片张这个样子：