toulzx/happybirthday

CSS

happybirthday

此仓库非 @toulzx 原创！不小心导致没有使用 fork 功能
作者：@orangeshinee
仓库地址：orangeshinee/happybirthday
以下为原仓库 README 内容，特此声明！

🎂一个生日倒计时＋祝福的静态页面

内容均来自于codepen上的开源项目

分别是：

项目内容

.
├── static ············ 静态资源
│   ├── style.css ····· 倒计时页面css
│   ├── style2.css ···· 气泡字体css
│   ├── card.css ······ 3d书本css
│   ├── font.css ······ google字体
│   ├── but.css ······· 按钮css
│   ├── count.js ······ 倒计时动画
│   ├── cake.ico ······ 网页favicon
│   └── bgm.mp3 ······· 生日快乐的bgm
└── index.html ········ 主页面

页面布局

<body>
    <div class="container" id="container">
        倒计时
      </div>
      
      <div class="container2" id="container2" >
          气泡字体
        </div>

    <div class="card" id="card">
        3D书本
        </div>
</body>

倒计时页面

具体时间在static/count.js中更改

let countDown = new Date('Oct 01, 2020 00:00:00').getTime(),
        x = setInterval(function() {
          let now = new Date().getTime(),
              distance = countDown - now;

首先展示倒计时页面，其他两个用display: none隐藏，等到倒计时归零或者点击了按钮之后，会将后面两个div显示出来；

气泡页面＋3D书本

考虑到移动端适应，修改了部分样式。封面可以自行修改
内容直接在index.html中修改即可