博客园美化相关模块

SimpleMemory风格化主题

https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/GettingStarted/install

详细教程可以看这个大佬的https://www.cnblogs.com/6b7b5fc3/p/12729633.html

=====更新

版本更新到v2了，地址变了，顺便放几张图在文章末尾，作为头图

https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/

live2d小人

https://l2dwidget.js.org/docs/index.html

模型预览https://blog.csdn.net/wang_123_zy/article/details/87181892

可通过使用浏览器访问 https://unpkg.com/2D模型全名称@1.0.5/ 来查找对应的模型json地址，如https://unpkg.com/live2d-widget-model-chitose@1.0.5

https://blog.csdn.net/zadaya/article/details/105720645

使用总结https://www.freesion.com/article/8715586195/

使用文档，参数，API：（github的挂掉了） https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init

====更新

最近发现小人不显示了，修改了一下配置，开头换成引用这两个js，第二个必须要引用，否则会报错“L2Dwidget is not defined”

有官方示例可以学https://l2dwidget.js.org/dev.html

发现了一个最全的模型仓库https://github.com/summerscar/live2dDemo 其模型地址为https://summerscar.me/live2dDemo/assets/{name}/{name}.model.json

另外还有一个up制作的l2d工具https://docs.paul.ren/pio/ 其模型网站https://mx.paul.ren/

input控件+CSS实现折叠文字内容

参考https://www.cnblogs.com/e0yu/p/10480216.html

效果见https://www.cnblogs.com/smileglaze/p/13854538.html

通过label的for属性可以给label中的文字绑定一个有checked属性的input控件的状态（如checkbox、radio等），再通过css的~符号控制checked属性让指定样式切换。

其中需要隐藏的部分的id为hide_text，input控件的id为control，为了显示效果就把它隐藏掉了

#hide_text {display: none;}
#control{display: none;}
#control:checked ~ #hide_text {display: block;}

隐藏了input控件后为了提示读着这段文字可以点击，我们可以使用添加下划线和将文本加粗、改为蓝色等方法。

需要注意的是html中必须让input控件与要隐藏的文本内容处于同一个布局中，如果被<p>或者<div>这样的标志将其隔开，将实现不了效果

<html>
 <head></head>
 <body>
  <p style="margin-left: 30px">
   <span style="text-decoration: underline">
    <strong>
     <span style="color: rgba(51, 102, 255, 1)">
      <label class="nav-btn" for="control">>>>点击查看更多:</label>
     </span>
    </strong>
   </span>
  </p> 
  <div>
   <input id="control" class="nav-con" type="checkbox" name="" /> 
   <ul id="hide_text"> 
    <li>第一段内容 
     <ul> 
      <li>启用活动页</li> 
      <li>优化了等待时间</li> 
     </ul>
    </li>
    <li>第二段内容 
     <ul> 
      <li>我知道了</li> 
      <li>进一步改进</li> 
     </ul>
    </li>
   </ul>
  </div>
 </body>
</html>

（持续更新..）

posted @ 2020-10-20 20:50 evtricks 阅读(248) 评论(0) 收藏举报

刷新页面返回顶部

Keep Learning

从未放弃的美好

博客园美化相关模块

SimpleMemory风格化主题

live2d小人

input控件+CSS实现折叠文字内容

公告