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

目录

  1. 1. 预览地址
  2. 2. 电脑端效果图
  3. 3. 手机端效果图
  4. 4. 文档说明
  5. 5. 下载地址
  6. 6. DIY
    1. 6.1. 背景渐变 (建议删掉彩带)
    2. 6.2. 打字特效
    3. 6.3. 更多 DIY 博主正在探索中

昨晚逛 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 博主正在探索中

  • 支付宝
  • 微信
html css homepage
翻新:hexo-theme-blank
hexo-归档页面加入12生肖
© 2020 DmxZ
Powered by hexo | Theme is blank