今天我们来一起制作一个产品展示的动画,因为有鼠标滑入就能出现商品,所以能让人眼前一亮,关注到商品,那我们今天一起来制作吧!
首先准备素材到根目录,然后在vscode里创建html,网页标题:幕布产品展示
接下来开始制作:
第一步:创建一个1366*600的盒子,以背景图的方式引入产品图,并让box居中
效果如下:
第二步:用伪元素创建左边和右边的幕布,引入背景图--幕布,并给它设置浮动,使幕布和产品图在同一行排列,设置宽各占一半--50%,高600px。
此处需要注意:
1、.box和::before、::after之间不要有空格;
2、伪元素的css里面一定要有content=“”;
3、.box::before和.box::after之间用逗号连接。
效果如下:
第三步:给右