小米技术总结
雷总镇楼
过渡动画效果
首先直接看示例效果
代码部分
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博客](https://link.juejin.cn?target=https%3A%2F%2Fblog.csdn.net%2Fqq_43923146%2Farticle%2Fdetails%2F127510036%3Fops_request_misc%3D%25257B%252522request%25255Fid%252522%25253A%252522169851222916800182783719%252522%25252C%252522scm%252522%25253A%25252220140713.130102334..%252522%25257D%26request_id%3D169851222916800182783719%26biz_id%3D0%26utm_medium%3Ddistribute.pc_search_result.none-task-blog-2~all~top_click~default-2-127510036-null-null.142%255Ev96%255Epc_search_result_base4%26utm_term%3Dtransition%26spm%3D1018.2226.3001.4187 "https://blog.csdn.net/qq_43923146/article/details/127510036?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169851222916800182783719%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169851222916800182783719&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-127510036-null-null.142%5Ev96%5Epc_search_result_base4&utm_term=transition&spm=1018.2226.3001.4187")) **2.** shadow使悬浮块看起来更加立体 \[详解见\]([【前端Talkking】CSS系列-css3之box-shadow介绍 - 掘金 (juejin.cn)](https://juejin.cn/post/6844903556714102798?searchId=202310290104241A4DD6AD4F70DDCF6300 "https://juejin.cn/post/6844903556714102798?searchId=202310290104241A4DD6AD4F70DDCF6300")) ## 图标的用法  上述图标和文字一起变色的实现效果其实十分简单 **第一步** [进入矢量库](https://link.juejin.cn?target= "")  **第二步** 资源管理------\>我的项目 建立一个项目备用 **第三步** 将心仪的图标添加入库 并直接将素材下载在本地   **第四步** 下载后解压文件夹找到iconfont.css(一般来讲是这个)并在head引用  当这样引用完后 图标便具有文字属性可以用css设置颜色 **第五步** 可在iconfont.css中调整图标大小  **引用格式代码如下** ```xml