时间：2021-07-01 10:21:17 帮助过：22人阅读
在实际项目制作中，因为项目包含的页面非常多，在很多页面中都有大部分的区域是和其他页面重复的，如果在项目一开始就直接埋头写代码，而不对项目进行规划的话，到最后项目代码肯定会有非常之多的重复代码，这样既耗时又不讨好。即使中途发现存在重复代码开始复制粘贴来提高效率，这些重复代码也一样会出现在各个文件中，影响到项目在浏览器中的加载速度，同时如果在项目后期这些重复代码需要修改的话，也会变得非常之麻烦了。
在有了以上几点问题之后，项目的前期规划就显得特别重要了，规划中不仅要完成好项目的总体布局，还要对项目中可复用的代码集中在一起统一使用和管理，方便使用和修改。在前端中有一个词叫"组件化"，意思是对项目中有各种各样功能或者可能会重复用到的代码写成一个个的组件，最常见的组件有轮播、弹窗之类的，网络上也有很多基于JQuery的各种各样方便又能快速使用的组件，组件是组件开发者把某些功能通过js代码封装成组件构造器，而且组件使用者只需要通过实例化组件即可达到使用组件的效果。我们需要的就是组件化的思维，既对于重复代码的集中管理和使用。
把组件化思维体现在项目中的话我们能做到以下几点：
在一般的项目开发中HTML、CSS主要的作用是进行静态页面的制作，也就是所谓的切图，而大多数的交互效果都是交由JS进行实现的，但是在这次的项目开发中，通过其他同学的分享，有再一次地让我见识到了CSS3的强大。可以模拟轮播、弹窗、点击切换图片等等的交互效果，虽然只是模拟，而且做出来的效果也没有JS实现的那么完善，但是该有的效果也都有，并且实现起来比JS要简单许多。在以往的认知中这些效果都是需要JS才能实现的，不过现在如果把CSS3和JS结合起来使用的话，想必能做出 更多更有趣的效果。
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Documenttitle> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 ul{ 12 list-style:none; 13 } 14 .warp{ 15 margin:50px; 16 width:200px; 17 height:100px; 18 position:relative; 19 overflow:hidden; 20 } 21 ul{ 22 width:600px; 23 height:100px; 24 position:absolute; 25 top:0; 26 left:0; 27 } 28 ul li{ 29 display:block; 30 width:200px; 31 height:100px; 32 font-size:50px; 33 line-height:100px; 34 text-align:center; 35 color:#fff; 36 float:left; 37 } 38 ul li:nth-child(1){ 39 background-color:red; 40 } 41 ul li:nth-child(2){ 42 background-color:blue; 43 } 44 ul li:nth-child(3){ 45 background-color:black; 46 } 47 @keyframes slider1{ 48 0%{margin-left:-0px;} 49 14%{margin-left:-0px;} 50 19%{margin-left:-200px;} 51 47%{margin-left:-200px;} 52 52%{margin-left:-400px;} 53 80%{margin-left:-400px;} 54 85%{margin-left:0px;} 55 100%{margin-left:0px;} 56 } 57 @keyframes slider2{ 58 0%{margin-left:-200px;} 59 14%{margin-left:-200px;} 60 19%{margin-left:-400px;} 61 47%{margin-left:-400px;} 62 52%{margin-left:0px;} 63 80%{margin-left:0px;} 64 85%{margin-left:-200px;} 65 100%{margin-left:-200px;} 66 } 67 @keyframes slider3{ 68 0%{margin-left:-400px;} 69 14%{margin-left:-400px;} 70 19%{margin-left:0px;} 71 47%{margin-left:0px;} 72 52%{margin-left:-200px;} 73 80%{margin-left:-200px;} 74 85%{margin-left:-400px;} 75 100%{margin-left:-400px;} 76 } 77 .warp ul{ 78 -webkit-animation:slider1 6s infinite; 79 } 80 #click1:checked ~ .warp ul{ 81 -webkit-animation-name:slider1; 82 } 83 #click2:checked ~ .warp ul{ 84 -webkit-animation-name:slider2; 85 } 86 #click3:checked ~ .warp ul{ 87 -webkit-animation-name:slider3; 88 } 89 #click1,#click2,#click3{ 90 display:none; 91 } 92 label{ 93 display:inline-block; 94 width:50px; 95 font-size:24px; 96 height:50px; 97 line-height:50px; 98 color:#fff; 99 background-color:#ccc; 100 text-align:center; 101 } 102 label:first-of-type{ 103 margin-left:66px; 104 } 105 .warp:hover ul{ 106 animation-play-state:paused; 107 } 108 style> 109 head> 110 <body> 111 <input type="radio" checked name="ctrl" id="click1"> 112 <input type="radio" name="ctrl" id="click2"> 113 <input type="radio" name="ctrl" id="click3"> 114 115 <div class="warp"> 116 <ul> 117 <li>1li> 118 <li>2li> 119 <li>3li> 120 ul> 121 div> 122 <label for="click1">1label> 123 <label for="click2">2label> 124 <label for="click3">3label> 125 body> 126 html>
以上为css模拟的轮播效果。