├── README.md └── src ├── 191023-tabBar ├── nativeJs │ ├── index.html │ └── style.css ├── pro │ ├── index.html │ └── style.css └── vue │ ├── index.html │ └── style.css └── 191102-switch ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # 前端实验室 视频代码托管仓库 2 | 3 | 4 | >19-10-24 底部导航栏 ----> 视频版[[代码](https://github.com/frontendlabOfficial/FrontendlabCode/tree/master/src/191023-tabBar/vue) [演示](https://frontendlabofficial.github.io/FrontendlabCode/src/191023-tabBar/vue/)] 原生Js版[[代码](https://github.com/frontendlabOfficial/FrontendlabCode/tree/master/src/191023-tabBar/nativeJs) [演示](https://frontendlabofficial.github.io/FrontendlabCode/src/191023-tabBar/nativeJs)] 修改版(将视频中的代码加上了自适应功能 可以随界面放大缩小 增加item界面不乱)[[代码](https://github.com/frontendlabOfficial/FrontendlabCode/tree/master/src/191023-tabBar/pro) [演示](https://frontendlabofficial.github.io/FrontendlabCode/src/191023-tabBar/pro)]) 5 | 6 | >19-11-02 自定义选择框 ----> [代码](https://github.com/frontendlabOfficial/FrontendlabCode/tree/master/src/191102-switch) [演示](https://frontendlabofficial.github.io/FrontendlabCode/src/191102-switch) 7 | -------------------------------------------------------------------------------- /src/191023-tabBar/nativeJs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 37 | 38 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/191023-tabBar/nativeJs/style.css: -------------------------------------------------------------------------------- 1 | /* 配色方案: 2 | 背景:7dbfff, 3 | 图标&标签:4298e7, 4 | 遮罩:e4f2ff */ 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body{ 11 | height: 100vh; 12 | background-color: #7dbfff; 13 | 14 | /* 居中 */ 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | #nav-tab{ 21 | position: relative; 22 | 23 | width: 600px; 24 | height: 150px; 25 | background-color: #fff; 26 | display: flex; 27 | 28 | border-radius: 20px 20px 90px 90px; 29 | 30 | overflow: hidden; 31 | 32 | border: 20px solid white; 33 | } 34 | 35 | .nav-tab-item{ 36 | width: 130px; 37 | height: 100%; 38 | 39 | z-index: 2; 40 | transition: .3s; 41 | cursor: pointer; 42 | 43 | 44 | /* 居中 */ 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | justify-content: center; 49 | } 50 | 51 | .nav-tab-item.active{ 52 | width: 210px; 53 | } 54 | 55 | .nav-tab-item_icon{ 56 | font-size: 32px; 57 | color:#4298e7; 58 | transition: .3s; 59 | transform: translate(0,0px); 60 | } 61 | 62 | .active .nav-tab-item_icon{ 63 | transform: translate(0,-10px); 64 | 65 | } 66 | 67 | .nav-tab-item_label{ 68 | font-size: 20px; 69 | color:#4298e7; 70 | opacity: 0; 71 | transition: .3s; 72 | user-select: none; 73 | } 74 | 75 | .active .nav-tab-item_label{ 76 | opacity: 1; 77 | } 78 | 79 | .nav-tab-overlay{ 80 | position: absolute; 81 | left: 0; 82 | top: 0; 83 | 84 | height: 100%; 85 | width: 210px; 86 | 87 | background-color: #e4f2ff; 88 | border-radius: 20px; 89 | 90 | transition:.3s; 91 | } -------------------------------------------------------------------------------- /src/191023-tabBar/pro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/191023-tabBar/pro/style.css: -------------------------------------------------------------------------------- 1 | /* 配色方案: 2 | 背景:7dbfff, 3 | 图标&标签:4298e7, 4 | 遮罩:e4f2ff */ 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body { 11 | height: 100vh; 12 | background-color: #7dbfff; 13 | 14 | /* 居中 */ 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | #nav-tab { 21 | position: relative; 22 | 23 | width: 90%; 24 | height: 150px; 25 | background-color: #fff; 26 | display: flex; 27 | 28 | border-radius: 20px 20px 90px 90px; 29 | 30 | overflow: hidden; 31 | 32 | border: 20px solid white; 33 | } 34 | 35 | .nav-tab-item { 36 | height: 100%; 37 | 38 | z-index: 2; 39 | transition: 0.3s; 40 | cursor: pointer; 41 | 42 | /* 居中 */ 43 | display: flex; 44 | flex-direction: column; 45 | align-items: center; 46 | justify-content: center; 47 | } 48 | 49 | .nav-tab-item.active { 50 | width: 210px; 51 | } 52 | 53 | .nav-tab-item_icon { 54 | font-size: 32px; 55 | color: #4298e7; 56 | transition: 0.3s; 57 | transform: translate(0, 0px); 58 | } 59 | 60 | .active .nav-tab-item_icon { 61 | transform: translate(0, -10px); 62 | } 63 | 64 | .nav-tab-item_label { 65 | font-size: 20px; 66 | color: #4298e7; 67 | opacity: 0; 68 | transition: 0.3s; 69 | user-select: none; 70 | } 71 | 72 | .active .nav-tab-item_label { 73 | opacity: 1; 74 | } 75 | 76 | .nav-tab-overlay { 77 | position: absolute; 78 | left: 0; 79 | top: 0; 80 | 81 | height: 100%; 82 | width: 210px; 83 | 84 | background-color: #e4f2ff; 85 | border-radius: 20px; 86 | 87 | transition: 0.3s; 88 | } 89 | -------------------------------------------------------------------------------- /src/191023-tabBar/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 23 | 24 | 25 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/191023-tabBar/vue/style.css: -------------------------------------------------------------------------------- 1 | /* 配色方案: 2 | 背景:7dbfff, 3 | 图标&标签:4298e7, 4 | 遮罩:e4f2ff */ 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body{ 11 | height: 100vh; 12 | background-color: #7dbfff; 13 | 14 | /* 居中 */ 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | #nav-tab{ 21 | position: relative; 22 | 23 | width: 600px; 24 | height: 150px; 25 | background-color: #fff; 26 | display: flex; 27 | 28 | border-radius: 20px 20px 90px 90px; 29 | 30 | overflow: hidden; 31 | 32 | border: 20px solid white; 33 | } 34 | 35 | .nav-tab-item{ 36 | width: 130px; 37 | height: 100%; 38 | 39 | z-index: 2; 40 | transition: .3s; 41 | cursor: pointer; 42 | 43 | 44 | /* 居中 */ 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | justify-content: center; 49 | } 50 | 51 | .nav-tab-item.active{ 52 | width: 210px; 53 | } 54 | 55 | .nav-tab-item_icon{ 56 | font-size: 32px; 57 | color:#4298e7; 58 | transition: .3s; 59 | transform: translate(0,0px); 60 | } 61 | 62 | .active .nav-tab-item_icon{ 63 | transform: translate(0,-10px); 64 | 65 | } 66 | 67 | .nav-tab-item_label{ 68 | font-size: 20px; 69 | color:#4298e7; 70 | opacity: 0; 71 | transition: .3s; 72 | user-select: none; 73 | } 74 | 75 | .active .nav-tab-item_label{ 76 | opacity: 1; 77 | } 78 | 79 | .nav-tab-overlay{ 80 | position: absolute; 81 | left: 0; 82 | top: 0; 83 | 84 | height: 100%; 85 | width: 210px; 86 | 87 | background-color: #e4f2ff; 88 | border-radius: 20px; 89 | 90 | transition:.3s; 91 | } -------------------------------------------------------------------------------- /src/191102-switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/191102-switch/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 配色方案: 3 | 背景色:a2ade7 4 | 副色:d3d4ec 5 | 主色:275efe 6 | */ 7 | 8 | /* 9 | 整体思路: 10 | 1.想实现自定义按钮，需要先覆盖掉默认样式，这里我们仅需要将input隐藏即将display设置为none即可 11 | 2.接下来要设置自己的样式，我们之所以可以仅用css自定义样式，是因为label被选中后,其对应的input会添加上:checked这个伪类元素， 12 | 利用这个机制，我们便可以判断出选中与否这两个状态，从而利用css实现自定义的切换效果 13 | */ 14 | 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | body { 21 | height: 100vh; 22 | 23 | /* 使内容居中 */ 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | 28 | background-color: #a2ade7; 29 | } 30 | 31 | .switch { 32 | cursor: pointer; 33 | 34 | /* position设为relative,这样其子元素设置为absolute时才会以该元素的位置为基准 */ 35 | position: relative; 36 | } 37 | 38 | .switch input { 39 | display: none; 40 | } 41 | 42 | /* 43 | 代码好几处用到了before和after元素,主要是为了代码的简洁性，对这两个伪类元素不了解的可以参考: 44 | before:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before 45 | after:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after 46 | */ 47 | 48 | .switch::before { 49 | position: absolute; 50 | left: 0; 51 | top: 0; 52 | 53 | /* 即使无内容也必须设置为'',否则不会显示 */ 54 | content: ""; 55 | 56 | display: block; 57 | width: 60px; 58 | height: 32px; 59 | background-color: white; 60 | border-radius: 16px; 61 | } 62 | 63 | input + .line::before, 64 | input + .line::after { 65 | position: absolute; 66 | 67 | top: 14px; 68 | 69 | content: ""; 70 | width: 24px; 71 | height: 4px; 72 | 73 | background-color: #d3d4ec; 74 | transition: 0.3s; 75 | } 76 | 77 | input + .line::before { 78 | transform: scaleX(0); 79 | left: 4px; 80 | 81 | /* 表示transform的起始点 格式为 [x][y][z] 亦可用百分比表示 详情https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin */ 82 | transform-origin: left; 83 | } 84 | 85 | input + .line::after { 86 | left: 32px; 87 | transform: scaleX(1); 88 | transform-origin: right; 89 | } 90 | 91 | input:checked + .line::before { 92 | transform: scaleX(1); 93 | } 94 | 95 | input:checked + .line::after { 96 | transform: scaleX(0); 97 | } 98 | 99 | input + .line span::before { 100 | position: absolute; 101 | top: 4px; 102 | left: 4px; 103 | content: ""; 104 | display: block; 105 | width: 24px; 106 | height: 24px; 107 | 108 | border-radius: 50%; 109 | /* inset设置内阴影 这里仅设置了扩散半径 详情 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow */ 110 | box-shadow: inset 0 0 0 4px #d3d4ec; 111 | background-color: #fff; 112 | transition: 0.3s; 113 | } 114 | 115 | input:checked + .line span::before { 116 | box-shadow: inset 0 0 0 12px #275efe; 117 | left: 32px; 118 | } 119 | 120 | input + .line span { 121 | line-height: 32px; 122 | padding-left: 68px; 123 | font-size: 20px; 124 | } 125 | --------------------------------------------------------------------------------