【博学谷学习记录】超强总结，用心分享丨用css完成鼠标滑入，幕布拉开展示商品的动画效果

今天我们来一起制作一个产品展示的动画，因为有鼠标滑入就能出现商品，所以能让人眼前一亮，关注到商品，那我们今天一起来制作吧！

首先准备素材到根目录，然后在vscode里创建html，网页标题：幕布产品展示

接下来开始制作：

第一步：创建一个1366*600的盒子，以背景图的方式引入产品图，并让box居中

效果如下：

第二步：用伪元素创建左边和右边的幕布，引入背景图--幕布，并给它设置浮动，使幕布和产品图在同一行排列，设置宽各占一半--50%，高600px。

此处需要注意：

1、.box和::before、::after之间不要有空格；

2、伪元素的css里面一定要有content=“”；

3、.box::before和.box::after之间用逗号连接。

效果如下： 

第三步：给右