1,点击下拉菜单代码,位置我做了固定fixed,可以去掉;加了li标签,改成竖向显示;使用半透明opacity效果;鼠标接触后45度转动.nav-btn:hover。

<style>
ul,li{
list-style: none;
}
*{
padding: 0;
margin: 0;
}
.nav-con{
display: none;
}
.nav-box{
display: none;
}
.nav-con:checked ~ .nav-box{
display: block;
}
.nav-btn{
padding: 0;
}

.nav-btn:hover {rotate: 45deg;}

</style>
<label for=”control” class=”nav-btn” style=”margin: 0 auto;display: block;color: #29d;font-size: 3rem;text-align: center;font-weight: bolder;position: fixed;right: 30px;top: 30px;”>❄</label>
<div>
<input type=”checkbox” name=”” id=”control” class=”nav-con”>
<ul class=”nav-box” style=”padding: 7px;background-color: #fada5c;border-radius: 3px;position: fixed;right: 30px;top: 90px;max-width: 150px;line-height: 1.8em;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);opacity: 0.6;”>
<li><a href=”https://laomai.org/” target=”_blank” rel=”noopener”>老麦笔记</a></li>
<li><a href=”https://www.cfanlost.com/” target=”_blank” rel=”noopener”>甜甜圈</a></li>
<li><a href=”https://xingtu.org/” target=”_blank” rel=”noopener”>星途</a></li>
<li><a href=”https://minirizhi.com/” target=”_blank” rel=”noopener”>迷你日志</a></li>
<li><a href=”http://www.lorsin.com/” target=”_blank” rel=”noopener”>浮生若梦</a></li>
<li><a href=”https://www.vian.top/” target=”_blank” rel=”noopener”>Vian</a></li>
<li><a href=”https://maxwuhan.com/” target=”_blank” rel=”noopener”>大武汉</a></li>
<li><a href=”https://qq.md/” target=”_blank” rel=”noopener”>叶开楗</a></li>
<li><a href=”https://qydzz.cn/” target=”_blank” rel=”noopener”>七月的栀子</a></li>
<li><a href=”https://blog.alttt.com/” target=”_blank” rel=”noopener”>阵雨兄</a></li>
<li><a href=”https://ybiis.com/” target=”_blank” rel=”noopener”>梦想家野比</a></li>
<li><a href=”https://chenyyds.com/” target=”_blank” rel=”noopener”>老陈网志</a></li>
<li><a href=”https://www.duanxiansen.com/” target=”_blank” rel=”noopener”>段先森</a></li>
<li><a href=”https://www.jiangyu.org/” target=”_blank” rel=”noopener”>天一生水</a></li></ul>
</div>

2,打字效果css,效果见首页,我加入了链接,也可以去掉

$ 无聊时就改css玩

字符

<h11 style="margin: 10px auto;font-size: 1em;background-color: #fada5c;display: block;padding: 10px;border-radius: 3px;font-style: italic;"><div style="display: block;color: #777;"><div id="window" class="window-c"><div id="title-bar" class="title-bar-c"></div><div id="show-board" class="show-board-c">$ 今日木工结束工作/昨晚购买1个方太集成灶/Rss阅读器推荐Fluent Reader<span id="cur">_</span></div></div></div><script>!function(e,n){"function"==typeof define&&define.amd?define([],n):e.Printer=n()}(this,function(e){var n,r,t,d,u={printer:{version:"0.0.1"}},i="",c={speed:65,selector:"canvas",startIndex:0,endIndex:0,hasCur:!0,curId:"cur",curStr:"_",curStyle:"font-weight: bold;",curSpeed:100,lnStr:""},o="";function s(){r.innerHTML+='<span id="'+c.curId+'" style="'+c.curStyle+'">'+c.curStr+"</span>",n=setTimeout(s,1.5*c.speed)}function a(){t.innerHTML=d?c.curStr:"",d=!d}return u.init=function(e,n){for(var t in i=e,n)c[t]=n[t];return r=document.getElementById(c.selector),c.startIndex,c.endIndex=0==c.endIndex?i.length:c.endIndex,c.hasCur&&s(),this},u.print=function(){for(var e=0;e<i.length;e++)!function(e){setTimeout(function(){"\n"===i.charAt(e)?o+="<br>"+c.lnStr:o+=i.charAt(e),r.innerHTML=c.lnStr+o},c.speed*(e+1))}(e);setTimeout(function(){var e;c.hasCur&&((e=document.createElement("span")).id=c.curId,r.appendChild(e),t=document.getElementById(c.curId),clearTimeout(n),setInterval(a,c.curSpeed))},c.speed*i.length)},u})</script><script>var str="$ 今日木工结束工作/昨晚购买1个方太集成灶/Rss阅读器推荐Fluent Reader";Printer.init(str,{selector:"show-board",lnStr:""}).print()</script><a style="color: #777;" rel="nofollow" target="_blank" href="https://illl.xyz/goto?url=aHR0cHM6Ly93d3cuaWxsbC54eXovYmlqaS8=" rel="noopener"><span class="more" style="position: relative;float: right;margin-top: -23px;color: #777;">...</span></a></h11>