记塔罗占卜前端开发的小结

1.塔罗占卜有个洗牌的动画，这里主要用css实现，将22张牌的初始状态都置为中心点绝对定位，动画开始后zIndex依次增大，rotate旋转角度值从左到右由负值逐渐递增为正值。

2.塔罗占卜首页的背景是上面有个背景，底部有个背景，刚开始采用的实现方式是在顶部和底部分别设置一个盒子，然后采用定位放置背景图片，后改称直接写在背景的大盒子里，

设置高度100%，将分别设置位置在顶部和顶部即可。

.page{
　　height:100%;
　　background:
　　url('../assets/images/section-first.jpg') 50% 0 no-repeat,
　　url('../assets/images/section-bottom.jpg') 50% 100% no-repeat;
　　background-size:100% auto;
}

3.对于css选择器的优化，开始是直接nth-child(2)，nth-child(3)这样选择优化后改为

当选择的是3的倍数直接 nth-child(3n)

当选择的是1-4 则采用:nth-child(n+1):nth-child(-n+4)

4.对于页面部分是数据部分是静态资源采用静态资源和数据统一加载防止回流

从这个项目中也优化了自己的webpack配置和打包文件，后续会整理成文档作为复盘总结。

转载于:https://www.cnblogs.com/xuniannian/p/10693868.html