静态纯css响应式博客引导页

2020-05-08 | 2020-05-09

昨晚逛 jQuery 库的时候发现了一个 css做的点击效果 《响应式新动态纯css样式点击效果》 便灵机一动,要是做成一个博客引导页那就很不错啦!😊,而已最近也很想找一个博客引导页,但是 百度+谷歌 搜了好久都没有自己喜欢了,所以何不自己动手丰衣足食,搞一个专属个人引导页🤪。

预览地址

demo : https://dmxz.me

电脑端效果图

手机端效果图

文档说明

图标采用的是 iconfont
用法自己百度
这里我就简单说说:

  1. fork一份我的github仓库,然后修改html文件
  2. 去 iconfont 把自己喜欢的 icon 添加到项目,然后生成 js
  3. 把生成的js复制粘贴到html相应位置
  4. 更改 icon
  5. 比如我的图标是 icon-HOMEMESSAGE
<a href="https://dmx.pub" target="_blank" rel="noopener noreferrer">
           <div class="box">
               <div class="icon">
                   <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-HOMEMESSAGE"></use>    
                   </svg>
               </div>
              <p>主页</p>
           </div>
   </a>

下载地址

老规矩,如果你想拿走,请给我一个 Star ⭐ 尊重作者劳动成果!

✨下载:github

DIY

背景渐变 (建议删掉彩带)

打开 css/style.css
删掉:

body{
    width: 100%;
    height: 100vh;
    /*//弹性盒子布局方式*/
    display: flex;
    /*容器内元素居中*/
    justify-content: center;
    align-items:center ;
}

改为

body{
    width: 100%;
    height: 100vh;
    /*//弹性盒子布局方式*/
    display: flex;
    /*容器内元素居中*/
    justify-content: center;
    align-items:center ;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    transition: box-shadow .2s ease-out;
}
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

打字特效

需要一点点html+css基础
把以下代码复制在 </body> 之前

<div class="typed">
  <span id="typed" style="white-space: pre-wrap;line-height: 30px;font-size: 20px;"></span>

  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>
  <script type="text/javascript">
      var options = {
          strings: [
              '欢迎来到 DmxZ 的自留地! \nWelcome to DmxZ private plot! ^3000',

          ],
          typeSpeed: 70,   //打印速度
          startDelay: 2000, //开始之前的延迟300毫秒
          loop: true,      //是否循环
          backSpeed: 50,
          showCursor: false
      };
      var typed = new Typed('#typed', options);
  </script>
</div>

更多信息,请参考 typed.js 文档

https://github.com/mattboldt/typed.js

因为考虑到手机屏幕大小问题,所以就不让打字在手机端显示了,在 style.css ,最下面加上:

@media screen and (max-width: 1200px) {
    .typed {
        display: none;
    }
}

更多 DIY 博主正在探索中


翻新:hexo-theme-blank
hexo-归档页面加入12生肖
© 2020 DmxZ
Powered by hexo | Theme is blank