HTML5 CSS3 精美案例 ： 实现VCD包装盒个性幻灯片

• 
• 
• 
• 
• 
• 

• 0

  1

  2

  3

  4

  5

  可以看到div#vcd是最外层容器，给它设置了一个背景；ul li 分别设置图片元素；i#cd设置背景为光盘，然后设置显示位置；div#indexBar中显示图片的索引，供点击。

  CSS：

  #vcd, #vcd ul, #vcd #wrapPager

  {

  width: 200px;

  height: 272px;

  }

  #vcd, #vcd ul, #vcd #wrapPager, #cd

  {

  background: url(“images/disk.png”) no-repeat 0 0;

  }

  #vcd

  {

  position: relative;

  margin: 20px auto 0;

  }

  #vcd ul, #vcd #wrapPager, #cd

  {

  position: absolute;

  }

  #vcd ul

  {

  background-position: -263px 3px;

  }

  #vcd ul li, #vcd ul li a, #vcd ul li a img

  {

  display: block;

  width: 178px;

  height: 264px;

  overflow: hidden;

  }

  #vcd ul li

  {

  top: 5px;

  left: 2px;

  opacity: 0;

  /visibility: hidden;/

  -webkit-transition: opacity linear .6s;

  /-webkit-transition: visibility linear .6s;/

  -moz-transition: opacity linear .6s;

  -ms-transition: opacity linear .6s;

  transition: opacity linear .6s;

  position: absolute;

  }

  #vcd ul li.active

  {

  opacity: 1;

  /visibility: visible;/

  }

  #vcd #cd

  {

  top: 64px;

  left: 78px;

  width: 146px;

  height: 146px;

  background-position: -510px 0;

  -webkit-transition: left ease .4s, -webkit-transform ease 1.2s .44s;

  -moz-transition: left ease .4s, -moz-transform ease 1.2s .44s;

  -ms-transition: left ease .4s, -ms-transform ease 1.2s .44s;

  transition: left ease .4s, transform ease 1.2s .44s;

  }

  #vcd #cd.switch

  {

  left: 120px;

  -webkit-transform: rotate(2520deg);

  -moz-transform: rotate(2520deg);

  -ms-transform: rotate(2520deg);

  transform: rotate(2520deg);

  }

  #vcd #wrapPager

  {

  display: block;

  left: 0;

  top: 2px;

  }

  #vcd #indexBar

  {

  top: 235px;

  left: 25px;

  text-align: center;

  overflow: hidden;

  opacity: 0;

  visibility: hidden;

  -webkit-transition: opacity linear .6s;

  -moz-transition: opacity linear .6s;

  -ms-transition: opacity linear .6s;

  transition: opacity linear .6s;

  position: absolute;

  }

  #vcd:hover #indexBar

  {

  opacity: 1;

  visibility: visible;

  }

  #vcd #indexBar a

  {

  display: inline-block;

  margin: 0 4px;

  height: 0;

  width: 0;

  border: 4px #9f9f9f solid;

  border-radius: 100%;

  text-indent: -200px;

  overflow: hidden;

  }

  #vcd #indexBar a:hover, #vcd #indexBar a.active

  {

  width: 4px;

  height: 4px;

  border-color: #05c7fe;

  border-width: 2px;

  }

  对于CSS大家可以照着敲一下，对于位置的布局主要就是依赖position:relative和position:absolute;然后大家会发现使用CSS3的过渡和变形：transition和transform 我简单提一下：

  1、transition : left 1s ease 0s ;

  参数1：需要过渡效果的属性，可以为单个属性：width,left等，也可以设置为all。

  参数2：过渡的持续时间

  参数3：过渡的速率动画，这个大家有兴趣可以查查，就是先慢后快，匀速之类的。

  参数4：过渡开始的延时时间

  transition也支持如下写法：

  transition-property:border, color , text-shadow ;

  transition-duration:2s , 3s , 3s ;

  2、transform支持几种变形

  transform:scale(0.5) 缩放

  transform:rotate(90deg)旋转90度

  transform:skew(10deg  2deg)斜切，矩形转化为平行四边形

  transform:matrix() 这个矩阵变形  http://www.useragentman.com/matrix/ 这个网站提供在线设计矩阵

  transform:translate(40px 20px)平移

  例外提供了：transform-origin：20% 20%；用于修改变形效果的起点，默认为重点

  当然我们这个例子用的是旋转，也就不用修改变形效果起点了。

  最后是JS：

  /**

  • Created with JetBrains WebStorm.

  • User: zhy

  • Date: 14-6-15

  • Time: 下午6:26

  • To change this template use File | Settings | File Templates.

  */

  var vcd = {

  /**

  • 常量

  */

  ID_VCD: “vcd”,

  ID_INDEXBAR: “indexBar”,

  ID_CD: “cd”,

  CLASS_ACTIVE: “active”,

  CLASS_CD_SWITCH: “switch”,

  currentIndex: 0,

  isRunning: false,

  timer: null,

  最后的最后

  对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！

  当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的

  

  最后，互联网不存在所谓的寒冬，只是你没有努力罢了！
  《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

  • 常量

  */

  ID_VCD: “vcd”,

  ID_INDEXBAR: “indexBar”,

  ID_CD: “cd”,

  CLASS_ACTIVE: “active”,

  CLASS_CD_SWITCH: “switch”,

  currentIndex: 0,

  isRunning: false,

  timer: null,

  最后的最后

  对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！

  当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的

  [外链图片转存中…(img-AW3VHN69-1714856789399)]

  最后，互联网不存在所谓的寒冬，只是你没有努力罢了！
  《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！