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

2020.05.08

2022.02.13

web html css

678 字 3 分钟

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

预览地址

demo : https://dmxz.me

电脑端效果图

手机端效果图

文档说明

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

fork一份我的github仓库，然后修改html文件
去 iconfont 把自己喜欢的 icon 添加到项目，然后生成 js
把生成的js复制粘贴到html相应位置
更改 icon
比如我的图标是 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;
    }
}