qikoo-只能摄像机页面（整屏上下图片滚动效果）

CSS代码为：

.wrap .block3 {background: url(images/qikoo_block3_img.jpg) no-repeat center center}
.wrap .block3 .main { position:relative;}
.wrap .block3 .right {background: url(images/qikoo_block3_imgb.png) no-repeat center bottom;background-size: auto 100%;bottom: 0;height: 75%;left: inherit;max-height: 698px;position: absolute;right: 50px;top: inherit;width: 600px;
    opacity: 0;
    transform: translateY(200px);
    -ms-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    transition: transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -moz-transition: -moz-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -webkit-transition: -webkit-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -o-transition: -o-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -ms-transition: -ms-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);}
.wrap .block3 .active {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);}
.wrap .block3 .left {float: left;height: 100%;width: 600px; position:relative;}
.wrap .block3 .left .content {bottom: inherit;height: 423px;left: 50%;position: absolute;right: inherit;top: 50%;margin-left: -270px;margin-top: -156.5px;width: 540px}
.wrap .block3 .left .content .title {color: #fff;font-size: 35px;font-weight: 100;line-height: 160%;
    opacity: 0;
    transform: translateY(25px);
    -ms-transform: translateY(25px);
    -moz-transform: translateY(25px);
    -webkit-transform: translateY(25px);
    -o-transform: translateY(25px);
    transition: transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -moz-transition: -moz-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -webkit-transition: -webkit-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -o-transition: -o-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -ms-transition: -ms-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    transition-delay: 400ms;
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    -ms-transition-delay: 400ms;}
.wrap .block3 .left .content .text1 {color: #fff;font-size: 14px;line-height: 160%;padding-top: 35px;padding-bottom: 60px;width: 450px;
    opacity: 0;
    transform: translateY(25px);
    -ms-transform: translateY(25px);
    -moz-transform: translateY(25px);
    -webkit-transform: translateY(25px);
    -o-transform: translateY(25px);
    transition: transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -moz-transition: -moz-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -webkit-transition: -webkit-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -o-transition: -o-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    -ms-transition: -ms-transform 2000ms cubic-bezier(.215,.61,.355,1),opacity 2000ms cubic-bezier(.215,.61,.355,1);
    transition-delay: 600ms;
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    -ms-transition-delay: 600ms;}
.wrap .block3 .left .content .active {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);}

主要讲述transform与transition的灵活运用动画效果出来！其中插件运用了jquery.mousewheel.min.js来上下滚动效果（单页特效）！

文章参阅：http://localhost/response/qikoo.html#section3