html { background: -webkit-radial-gradient(center, ellipse, #232323 0%, #000 100%); height: 100%; } #dise { width: 1010px; height: 380px; margin-left: auto; margin-right: auto; margin-top: 100px; background-color: rgba(255, 255, 255, 0.1); } .demo { position: absolute; margin-top: 20px; width: 1040px; margin-left: auto; margin-right: auto; } .main_promo li { position: relative; float: left; left: 0px; top: 0px; padding: 5px 0 5px 6px; overflow: hidden; } .main_promo div { float: left; } .slide a { position: relative; z-index: 1; display: block; width: 50px; height: 300px; border-radius: 0px; background-color: rgba(255, 255, 255, 0.1); transition: all 1.3s; } .slide p { /*设置字体*/ position: absolute; top: 20px; left: 10px; color: #A7170A; height: 20px; width: 100px; font-family: 方正启体繁体; font-size: 20px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, .8); word-break: break-all; /*-webkit-transform: rotate(-90deg);*/ } .slide_img { overflow: hidden; width: 0; height: 0; /*此处的长宽设置不能省略，否则不能隐藏*/ transition: width 0.7s ease-in-out; } input[type="radio"] { /*radio和a重合，达到选择的效果*/ position: absolute; left: 5px; z-index: 99; width: 50px; height: 300px; opacity: 0; } input:checked~ .slide a { opacity: 1; background: rgba(255, 255, 255, 0.1); /*按钮闪光效果*/ } input:checked~ .slide_img { width: 692px; height: 300px; /*此处的长宽必须设置，否则不显示*/ margin-left: 8px; } /*将背景颜色换成图片，并在上面添加书签，设置其css样式*/ .slide_img h4 { font-size: 28px; font-weight: bold; background-color: rgba(100, 100, 100, .5); color: #000080; } .slide_img .p1 { background-color: rgba(255, 255, 255, .5); color: #000080; } .slide_img .p2 { background-color: rgba(0, 0, 0, .8); color: #00FFFF; } .slide_img .p2 span { font-size: 40px; font-weight: bold; }
具体实现效果截图：
具体案例展示：
后面的话：
在用Javascript方法做仿淘宝手风琴效果是在网上找视频学的，但是最终视频里面的代码与实际运行结果不符，后面又在《Javascript高级程序设计上》专门看关于事件的部分内容，突然间觉得自己前面学习的太浅了，后面要抽时间把这一段给补上。