tnblog
首页
视频
资源
登录
原

好看的文件管理

4930人阅读 2021/1/23 19:28 总访问：3467476 评论：0 收藏：0 手机
分类: 前端

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <!-- 引入字体图标 -->
  8.     <!-- <link
  9.       href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
  10.       rel="stylesheet"
  11.     /> -->
  12.     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
  13.     <link rel="stylesheet" href="index.css">
  14.     <title>Document</title>
  15. </head>
  17. <body>
  18.     <div class="container">
  19.         <div class="top_bar">
  20.             <!-- 返回按钮 -->
  21.             <div class="back">
  22.                 <div class="fa fa-chevron_left"></div>
  23.             </div>
  24.             <!-- 标题 -->
  25.             <div class="content">File Manager</div>
  26.             <!-- 菜单按钮 -->
  27.             <div class="menu">
  28.                 <div class="fa fa-bars"></div>
  29.             </div>
  30.         </div>
  31.         <!-- 搜索栏 -->
  32.         <div class="search">
  33.             <!-- 用来制作渐变框以及搜索icon的容器 -->
  34.             <div class="input_out">
  35.                 <div class="fa fa-search"></div>
  36.             </div>
  37.             <!-- 输入框 -->
  38.             <div class="input" type="text" placeholder="let's clean and manage you files"></div>
  39.         </div>
  40.         <!-- 文件夹 -->
  41.         <div class="files">
  42.             <div class="file_orange">
  43.                 <div class="file_icon_container">
  44.                     <div class="file_icon"></div>
  45.                 </div>
  46.                 <span class="name">Documents</span>
  47.                 <span class="folder">144 folders</span>
  48.             </div>
  49.             <div class="file_pupple">
  50.                 <div class="file_icon_container">
  51.                     <div class="file_icon_blue"></div>
  52.                 </div>
  53.                 <span class="name">Documents</span>
  54.                 <span class="folder">144 folders</span>
  55.             </div>
  56.         </div>
  57.         <!-- 进度条 -->
  58.         <div class="progress">
  59.             <div class="left">
  60.                 <!-- 拟态环形与圆形 -->
  61.                 <div class="circle1"></div>
  62.                 <div class="circle2"></div>
  63.                 <div class="circle3"></div>
  64.                 <div class="circle4"></div>
  65.                 <div class="circle5"></div>
  66.                 <div class="circle6"></div>
  67.                 <div class="circle7"></div>
  68.             </div>
  70.             <div class="right">
  71.                 <div class="line">
  72.                     <span class="toggle">
  73.                     <div class="big blue">
  74.                         <div class="small"></div>
  75.                     </div>
  76.                 </span>
  77.                     <span class="text">Phone memory</span>
  78.                 </div>
  79.                 <span class="used">Used 10G || Free 26G</span>
  80.                 <div class="margin"></div>
  81.                 <div class="line">
  82.                     <span class="toggle">
  83.                     <div class="big">
  84.                         <div class="small"></div>
  85.                     </div>
  86.                 </span>
  87.                     <span class="text">External memory</span>
  88.                 </div>
  89.                 <span class="used">Used 10G || Free 26G</span>
  90.             </div>
  91.         </div>
  93.         <div class="items">
  94.             <div class="item item1">
  95.                 <div class="icon_container">
  96.                     <div class="icon"></div>
  97.                 </div>
  98.                 <span class="item_text">
  99.                 <span class="item_name">Image</span>
  100.                 <span class="num_item">188 Items</span>
  101.                 </span>
  102.                 <i class="fa fa-ellipsis-h"></i>
  103.             </div>
  104.             <div class="item item2">
  105.                 <div class="icon_container">
  106.                     <div class="icon"></div>
  107.                 </div>
  108.                 <span class="item_text">
  109.                 <span class="item_name">Document</span>
  110.                 <span class="num_item">124 Items</span>
  111.                 </span>
  112.                 <i class="fa fa-ellipsis-h"></i>
  113.             </div>
  114.         </div>
  115.     </div>
  116. </body>
  117. </html>

CSS

  1. /* 引入 google 字体 */
  3. @font-face {
  4.     font-family: "Montserrat";
  5.     font-style: italic;
  6.     font-weight: 800;
  7.     font-display: swap;
  8.     src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUPjIg1_i6t8kCHKm459WxZbgjD-w.ttf) format("truetype");
  9. }
  11. @font-face {
  12.     font-family: "Montserrat";
  13.     font-style: normal;
  14.     font-weight: 100;
  15.     font-display: swap;
  16.     src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUQjIg1_i6t8kCHKm45_Qphzg.ttf) format("truetype");
  17. }
  19. @font-face {
  20.     font-family: "Montserrat";
  21.     font-style: normal;
  22.     font-weight: 300;
  23.     font-display: swap;
  24.     src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD7g4.ttf) format("truetype");
  25. }
  28. /* 全局reset */
  30. * {
  31.     margin: 0px;
  32.     padding: 0px;
  33.     /* 更改盒子模型 */
  34.     box-sizing: border-box;
  35.     /* 设置全局字段 */
  36.     font-family: 'Montserrart', sans-serif;
  37. }
  39. body {
  40.     width: 100vw;
  41.     height: 100vh;
  42.     /* flex 布局设置子元素水平垂直居中 */
  43.     display: flex;
  44.     justify-content: center;
  45.     align-items: center;
  46.     /* 设置渐变的背景颜色 */
  47.     background: linear-gradient(to bottom right, #272c46, #464c6d);
  48. }
  51. /* 包含所有的布局样式的容器 */
  53. .container {
  54.     width: 480px;
  55.     height: 1042px;
  56.     border-radius: 50%;
  57.     /* 设置一个渐变的背景颜色，用来用来模拟变边框 */
  58.     background: linear-gradient(to bottom, #fba8bc, rgba(251, 168, 92, 0.1));
  59.     position: relative;
  60. }
  63. /* 设置一个稍微小于容器的伪元素并居中，使得container的背景颜色只露出四周一圈，从而达到渐变边框的效果 */
  65. .container:after {
  66.     content: '';
  67.     position: absolute;
  68.     top: 1px;
  69.     left: 1px;
  70.     width: 478px;
  71.     height: 1040px;
  72.     background-color: #363c5a;
  73.     box-shadow: 26px 16px 35px rgba(0, 0, 0, 0.29);
  74.     border-radius: 50px;
  75. }
  77. .container .top_bar {
  78.     width: 100%;
  79.     position: absolute;
  80.     top: 48px;
  81.     display: flex;
  82.     align-items: center;
  83.     justify-content: center;
  84.     z-index: 1;
  85. }
  88. /* 返回按钮 */
  90. .container .top_bar .back {
  91.     width: 50px;
  92.     height: 50px;
  93.     background: #414768;
  94.     box-shadow: -2px -2px 4px rgba(159, 159, 159, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.25);
  95.     border-radius: 15px;
  96.     position: relative;
  97. }
  100. /* 同样用到伪元素，达到双层效果 */
  102. .container .top_bar .back:after {
  103.     content: '';
  104.     position: absolute;
  105.     width: 46px;
  106.     height: 46px;
  107.     left: 2px;
  108.     top: 2px;
  109.     background: linear-gradient(135deg, #404666 0%, #495077 100%);
  110.     border-radius: 15px;
  111.     cursor: pointer;
  112.     z-index: 1;
  113.     transition: all 0.6s;
  114. }
  117. /* 当鼠标hover的时候，有一个向内凹陷的效果 */
  119. .container .top_bar .back:hover::after {
  120.     box-shadow: inset -2px -2px 4px rgba(160, 160, 160, 0.25), inset 2px 2px 4px rgba(0, 0, 0, 0.25);
  121. }
  124. /* 字体图标样式 */
  126. .container .top_bar .back .fa {
  127.     position: absolute;
  128.     left: 13px;
  129.     top: 13px;
  130.     font-size: 24px;
  131.     color: #fff;
  132.     z-index: 2;
  133.     cursor: pointer;
  134. }
  136. .container .top_bar .content {
  137.     font-style: italic;
  138.     font-size: 36px;
  139.     line-height: 21px;
  140.     color: #8d92af;
  141.     margin: 0px 29px;
  142. }
  145. /* menu 菜单，同样使用之前的方式使用渐变框 */
  147. .container .top_bar .menu {
  148.     width: 36px;
  149.     height: 36px;
  150.     border-radius: 12px;
  151.     background: linear-gradient(to bottom right, #b56773, #000);
  152.     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  153.     position: relative;
  154. }
  156. .container .top_bar .menu:after {
  157.     content: '';
  158.     position: absolute;
  159.     width: 34px;
  160.     height: 34px;
  161.     left: 1px;
  162.     top: 1px;
  163.     background: #454c70;
  164.     border-radius: 12px;
  165. }
  167. .container .top_bar .menu .fa {
  168.     position: absolute;
  169.     left: 10px;
  170.     top: 10px;
  171.     font-size: 16px;
  172.     color: #fff;
  173.     z-index: 2;
  174.     cursor: pointer;
  175. }
  178. /* 搜索栏 */
  180. .container .search {
  181.     position: absolute;
  182.     top: 132px;
  183.     width: 100%;
  184.     display: flex;
  185.     align-items: center;
  186.     justify-content: center;
  187.     z-index: 1;
  188. }
  190. .container .search .input_out {
  191.     position: relative;
  192.     width: 413px;
  193.     height: 70px;
  194.     background: linear-gradient(270.11deg, #363b59 0.09%, #42486a 99.92%);
  195.     box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.12), inset -1px -1px 2px rgba(171, 171, 171, 0.12);
  196.     border-radius: 21px;
  197. }
  200. /* 使用after伪元素制作四周凹陷效果 */
  202. .container .search .input_out:after {
  203.     content: "";
  204.     position: absolute;
  205.     width: 407px;
  206.     height: 64px;
  207.     top: 3px;
  208.     left: 3px;
  209.     background: linear-gradient(270.11deg, #363b59 0.09%, #42486a 99.92%);
  210.     box-shadow: 1px 1px 2px rgba(130, 130, 130, 0.25), -1px -1px 1px rgba(170, 170, 170, 0.12);
  211.     border-radius: 18px;
  212. }
  215. /* 使用before伪元素制作渐变边框填充四周凹陷区域 */
  217. .container .search .input_out:before {
  218.     content: '';
  219.     position: absolute;
  220.     width: 413px;
  221.     height: 70px;
  222.     left: 0px;
  223.     top: 0px;
  224.     background: linear-gradient(to right, #5360d7, rgba(0, 0, 0, 0));
  225.     border-radius: 18px;
  226. }
  228. .container .search .input_out .fa {
  229.     position: absolute;
  230.     left: 20px;
  231.     top: 22px;
  232.     font-size: 24px;
  233.     color: #fff;
  234.     z-index: 2;
  235. }
  238. /* 真正的输入栏 */
  240. .container .search .input {
  241.     width: 407px;
  242.     height: 64px;
  243.     outline: none;
  244.     border: none;
  245.     color: #797e9c;
  246.     font-size: 18px;
  247.     position: absolute;
  248.     border-radius: 18px;
  249.     padding: 0px 20px 0px 50px;
  250.     background-color: transparent;
  251. }
  253. .container .files {
  254.     position: absolute;
  255.     top: 249px;
  256.     height: 160px;
  257.     width: 100%;
  258.     display: flex;
  259.     align-items: center;
  260.     justify-content: space-evenly;
  261.     z-index: 1;
  262. }
  264. .container .files .file_pupple {
  265.     width: 184px;
  266.     height: 154px;
  267.     padding-left: 40px;
  268.     /* 设置宽度，使用字体图标自适应（以下同理） */
  269.     background-size: cover;
  270.     /* 使用提前设计好的svg */
  271.     background-image: url(svg/file_pupple.svg);
  272.     display: flex;
  273.     flex-direction: column;
  274.     justify-content: center;
  275. }
  277. .container .files .file_orange {
  278.     width: 184px;
  279.     height: 154px;
  280.     padding-left: 40px;
  281.     background-size: cover;
  282.     background-image: url(svg/file_orange.svg);
  283.     display: flex;
  284.     flex-direction: column;
  285.     justify-content: center;
  286. }
  288. .container .files .file_icon_container {
  289.     width: 39px;
  290.     height: 39px;
  291.     margin-top: 10px;
  292.     background: #444b6d;
  293.     box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.25), inset 3px 3px 4px rgba(0, 0, 0, 0.25);
  294.     border-radius: 12px;
  295.     display: flex;
  296.     justify-content: center;
  297.     align-items: center;
  298. }
  300. .container .files .file_icon_container .file_icon {
  301.     width: 15px;
  302.     height: 19px;
  303.     background-size: cover;
  304.     background-image: url(svg/file_icon_orange.svg);
  305. }
  307. .container .files .file_icon_container .file_icon_blue {
  308.     width: 15px;
  309.     height: 19px;
  310.     background-size: cover;
  311.     background-image: url(svg/file_icon_blue.svg);
  312. }
  314. .container .files .name {
  315.     margin-top: 10px;
  316.     font-weight: 600;
  317.     font-size: 18px;
  318.     line-height: 21px;
  319.     color: #9da1bf;
  320. }
  322. .container .files .folder {
  323.     font-size: 12px;
  324.     line-height: 14px;
  325.     color: #747999;
  326. }
  328. .container .progress {
  329.     position: absolute;
  330.     top: 445px;
  331.     height: 187px;
  332.     width: 100%;
  333.     display: flex;
  334.     align-items: center;
  335.     justify-content: space-evenly;
  336.     z-index: 1;
  337. }
  339. .container .progress .left {
  340.     position: relative;
  341.     width: 192px;
  342.     height: 192px;
  343.     display: flex;
  344.     justify-content: center;
  345.     align-items: center;
  346. }
  349. /* 使用多个div分别制作圆形和进度条循环 */
  351. .container .progress .left .circle1 {
  352.     position: absolute;
  353.     width: 192px;
  354.     height: 192px;
  355.     background: #3a4263;
  356.     box-shadow: inset -2px -2px 4px rgba(134, 134, 134, 0.25), inset 2px 2px 4px rgba(0, 0, 0, 0.25);
  357.     border-radius: 50%;
  358. }
  360. .container .progress .left .circle2 {
  361.     position: absolute;
  362.     width: 187px;
  363.     height: 187px;
  364.     border-radius: 50%;
  365.     background: #3a4263;
  366.     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25), -2px -2px 2px rgba(149, 144, 144, 0.25);
  367. }
  369. .container .progress .left .circle4 {
  370.     position: absolute;
  371.     border-radius: 50%;
  372.     width: 133px;
  373.     height: 133px;
  374.     background: #3a4263;
  375.     box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25), -2px -2px 1px rgba(82, 88, 129, 0.2);
  376. }
  378. .container .progress .left .circle3 {
  379.     position: absolute;
  380.     border-radius: 50%;
  381.     width: 138px;
  382.     height: 138px;
  383.     background: #3a4263;
  384.     box-shadow: inset -2px -2px 1px rgba(134, 134, 134, 0.25), inset 2px 2px 1px rgba(0, 0, 0, 0.25);
  385. }
  387. .container .progress .left .circle5 {
  388.     position: absolute;
  389.     border-radius: 50%;
  390.     width: 138px;
  391.     height: 138px;
  392.     border: 2.5px solid #47affd;
  393.     /* 通过clip-path来制作填充圆环（之前的视频说过这个属性） */
  394.     clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 50% 50%);
  395. }
  397. .container .progress .left .circle6 {
  398.     position: absolute;
  399.     width: 192px;
  400.     height: 192px;
  401.     border-radius: 50%;
  402.     border: 2.5px solid #e5777a;
  403.     transform: rotate(60deg);
  404.     clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 50% 50%);
  405. }
  407. .container .progress .left .circle7 {
  408.     position: absolute;
  409.     width: 54px;
  410.     height: 54px;
  411.     border-radius: 50%;
  412.     background: #464d71;
  413.     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -3px 4px rgba(255, 255, 255, 0.25);
  414. }
  416. .container .progress .right {
  417.     display: flex;
  418.     flex-direction: column;
  419. }
  421. .container .progress .right .margin {
  422.     margin-top: 40px;
  423. }
  425. .container .progress .right .used {
  426.     font-size: 14px;
  427.     line-height: 16px;
  428.     color: #9da1bf;
  429. }
  431. .container .progress .right .line {
  432.     display: flex;
  433.     align-items: center;
  434. }
  436. .container .progress .right .line .toggle {
  437.     margin-right: 6px;
  438. }
  440. .container .progress .right .line .toggle .big {
  441.     display: flex;
  442.     justify-content: center;
  443.     align-items: center;
  444.     width: 13px;
  445.     height: 13px;
  446.     border-radius: 50%;
  447.     background: #e5777a;
  448. }
  450. .container .progress .right .line .toggle .small {
  451.     width: 5px;
  452.     height: 5px;
  453.     border-radius: 50%;
  454.     background: #3b486a;
  455. }
  457. .container .progress .right .line .toggle .blue {
  458.     background: #47affd;
  459. }
  461. .container .progress .right .line .text {
  462.     font-size: 18px;
  463.     line-height: 21px;
  464.     color: #747999;
  465. }
  467. .container .items {
  468.     position: absolute;
  469.     top: 673px;
  470.     width: 100%;
  471.     display: flex;
  472.     flex-direction: column;
  473.     align-items: center;
  474.     justify-content: space-evenly;
  475.     z-index: 1;
  476.     overflow: hidden;
  477. }
  480. /* item 制作思路和上面的大体一致 */
  482. .container .items .item {
  483.     width: 414px;
  484.     height: 108px;
  485.     box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.25);
  486.     border-radius: 21px;
  487.     position: relative;
  488.     margin-top: 34px;
  489.     display: flex;
  490.     align-items: center;
  491. }
  493. .container .items .item:after {
  494.     content: "";
  495.     position: absolute;
  496.     width: 410px;
  497.     height: 104px;
  498.     left: 2px;
  499.     top: 2px;
  500.     border-radius: 21px;
  501.     background: linear-gradient(270.11deg, #363b59 0.09%, #42486a 99.92%);
  502.     cursor: pointer;
  503.     z-index: 1;
  504. }
  506. .container .items .item .icon_container {
  507.     margin-left: 26px;
  508.     display: flex;
  509.     align-items: center;
  510.     justify-content: center;
  511.     z-index: 2;
  512.     width: 55px;
  513.     height: 55px;
  514.     background: linear-gradient(135deg, #323753 0%, #58608a 100%);
  515.     box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.25), -3px -2px 20px rgba(255, 255, 255, 0.25);
  516.     border-radius: 13px;
  517. }
  519. .container .items .item .icon_container .icon {
  520.     width: 18px;
  521.     height: 18px;
  522.     background-size: cover;
  523.     background-image: url("svg/image_icon.svg");
  524. }
  526. .container .items .item .item_text {
  527.     z-index: 2;
  528.     display: flex;
  529.     flex-direction: column;
  530.     justify-content: center;
  531.     margin-left: 24px;
  532. }
  534. .container .items .item .item_text .item_name {
  535.     font-size: 24px;
  536.     line-height: 28px;
  537.     color: #9da1bf;
  538. }
  540. .container .items .item .item_text .num_item {
  541.     font-size: 14px;
  542.     line-height: 16px;
  543.     color: #747999;
  544. }
  546. .container .items .item .fa {
  547.     z-index: 2;
  548.     position: absolute;
  549.     right: 26px;
  550.     font-size: 24px;
  551.     color: #fff;
  552. }
  554. .container .items .item1 {
  555.     background: linear-gradient(to right, #a67b60, #50577f);
  556.     transition: all 0.6s;
  557. }
  559. .container .items .item1:hover {
  560.     background: #a67b60;
  561. }
  563. .container .items .item2 {
  564.     background: linear-gradient(to right, #4983be, #50577f);
  565.     transition: all 0.6s;
  566. }
  568. .container .items .item2:hover {
  569.     background: #4983be;
  570. }

图片资源

https://github.com/Libra11/CSS-EFFECT/tree/master/Main/file_manager/svg


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价
这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术