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学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门,即可获取!

    • 27
      点赞
    • 21
      收藏
      觉得还不错? 一键收藏
    • 0
      评论

    “相关推荐”对你有帮助么?

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值