小米技术总结
雷总镇楼
过渡动画效果
首先直接看示例效果
代码部分
css
/* 购物车的悬停显示 */
.black-nav .right-nav .cart .cart-list {
width: 316px;
/* height: 100px; */
height: 0;
font-size: 12px;
text-align: center;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
position: absolute;
top: 40px;
right: 0;
/* display: none; */
transition: all .3s;
overflow: hidden;
/* 显示优先级 */
z-index: 1;
}要点总结
1. transition使下拉菜单或是悬浮块出现的像德芙一样丝滑
[上述代码只用到了简单的过渡效果 详解见此链接](CSS transition（过渡效果）详解_造梦者FZ的博客-CSDN博客)
2. shadow使悬浮块看起来更加立体
[详解见](【前端Talkking】CSS系列-css3之box-shadow介绍 - 掘金 (juejin.cn))
图标的用法
上述图标和文字一起变色的实现效果其实十分简单
第一步 进入矢量库
第二步 资源管理------>我的项目 建立一个项目备用
第三步 将心仪的图标添加入库 并直接将素材下载在本地
第四步 下载后解压文件夹找到iconfont.css(一般来讲是这个)并在head引用
当这样引用完后 图标便具有文字属性可以用css设置颜色
第五步 可在iconfont.css中调整图标大小
引用格式代码如下
xml
<!-- 侧边导航栏 -->
<div class="aside">
<a href="#">
<i class="iconfont"></i><br>
<span>手机APP</span>
</a>
<a href="#">
<i class="iconfont"></i><br>
<span>个人中心</span>
</a>
<a href="#">
<i class="iconfont"></i><br>
<span>售后服务</span>
</a>
<a href="#">
<i class="iconfont"></i><br>
<span>售后服务</span>
</a>
<a href="#">
<i class="iconfont"></i><br>
<span>购物车</span>
</a>
</div>
</body>
</html>&#x +（图标代码）； 为其引用格式 务必记牢！
QQ音乐总结
transform效果
效果展示
上述只是运用到了transform的缩放scale效果 scale([, ])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。如：transform:scale(2,1.5):
更多详细效果如矩阵变形matrix [见此链接](css的Transform详解 - 掘金 (juejin.cn))
遮罩效果
示例
具体可见 [ ](CSS Masking (ishadeed.com))
当然你我显然都还没有能阅读懂此文章的英语能力
所以我贴心的为列位准备了译文版 [这里](CSS Masking - CSS 遮罩 - 掘金 (juejin.cn))
小技巧
github加速器
众所周知Github是全球最大开源网站，但他的浏览往往需要魔法，接下来为列位介绍一个插件，无需魔法流畅浏览github
[Edge的github加速插件](Microsoft Edge 加载项 - github加速)
万能的QQ截图
在需要提取或得知网页上的颜色时，打开ps提取往往是麻烦的，用qq截图就可以很好的解决这个问题
Ctrl+Alt+A 进行屏幕截图时 可将鼠标指到想要的颜色上并摁住Ctrl可显示该色块的16进制代码 十分滴方便
演示如下
不仅是可以取色号 截图键旁边的录制键也十分的好用
在配上视频转 gif 来做笔记也很方便 [点这里](视频转gif - 在线工具 (tool.lu))
Page Ruler插件
一款十分方便的测量px的Edge插件 可以显示宽 高 以及四个方向的网页距离
直接上演示
有了这个插件 想必列位的网页能越来越丝滑
ChatGpt
Chatgpt目前有3.5和4.0两个版本
其中3.5版本多为国内镜像网站与平常能见到的ai模型
4.0版本的chatgpt由于其性能的提升 openai对其进行了收费使用
当然在国内4.0是很难使用到的
下面为列位介绍几种Ai的途径
1.官网
openai的官网正规使用，当然需要借助魔法且亚洲账号有大概率会被封禁
2.免费国内网站（楼主强推）
国内大佬自己搭建的服务器连接chatgpt模型，但大多都要收费或者有次数限制，楼主这里给列位提供一个网址，目前是免费的 ，[但也希望有闲钱的可以捐款一下](GPT国内免费镜像 (tomyres.com))
当然 好事成双 这里还有另一个网站也是免费使用的 [点这里](FREEGPT (aifree.site))
其他很多套皮网站楼主在这里不建议使用，有些收费的网站也请个人酌情考虑！
3.个人搭建（楼主还未尝试）
列位如果精力充沛又很有时间的话可以试着自己搭建服务器来连接chatgpt 详情可见链接 [这里](还在用镜像站？还在找GPT4 API？GitHub新仓库！支持GPT4 真正免费使用ChatGPT API！_哔哩哔哩_bilibili)
楼主学习压力过大 目前还没有尝试搭建 望列位有时间可以多多尝试
4.国内平替AI
如果你没有很大的Ai需求 其实国内的平替软件就足够使用了
例如 讯飞星火 ，文心一言等
讯飞星火 (讯飞星火认知大模型-AI大语言模型-星火大模型-科大讯飞 (xfyun.cn))
文心一言 (文心一言 (baidu.com))
优点是为国产AI不用担心限速，且都有app可以在手机上使用
顺带一提文心一言有洛天依模型 可以说是十分的可爱了
5.AI总结
虽然Ai很好用，但楼主在这里提醒列位一定不要过度使用Ai 而逐渐失去自己思考的能力了
毕竟作为程序员 学习和思考的能力是关键 遇到问题第一时间一定还是要自己先思考而不是依赖AI
结尾超级大总结
这个专栏的目的主要是为了防止自己的记忆力下降导致很多技巧忘掉而产生的，当然也是方便把技术直接快捷的分享给他人为第二目的
希望看到这里的列位能点个小赞 收个小藏 支持一下楼主
也祝看到这篇文章的列位写代码永远不报错，BAT的offer拿到手软
啊啊啊啊啊啊啊 点赞！！ 收藏！！
