zoukankan      html  css  js  c++  java
  • 记塔罗占卜前端开发的小结

    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配置和打包文件,后续会整理成文档作为复盘总结。

  • 相关阅读:
    Objective-C传递数据小技巧
    得到当前活动的controller
    ios7去除手势滑动返回
    生活小常识
    通过email分享
    release下去除nslog宏
    AFNetworking VS ASIHTTPRequest
    web服务器和应用服务器
    mac 搭建git服务器
    UIKit基础:14-序列帧动画的简单介绍
  • 原文地址:https://www.cnblogs.com/xuniannian/p/10693868.html
Copyright © 2011-2022 走看看