Web前端学习笔记——HTML5与CSS3之购物车宣传案例

最新推荐文章于 2022-06-17 09:14:39 发布

唯恋殊雨

最新推荐文章于 2022-06-17 09:14:39 发布

阅读量2k

点赞数

分类专栏： Web前端文章标签： WEB前端

本文链接：https://blog.csdn.net/tichimi3375/article/details/82837412

版权

Web前端同时被 2 个专栏收录

63 篇文章 4 订阅

订阅专栏

WEB前端开发

63 篇文章 2 订阅

订阅专栏

《购物车宣传》案例

综合运用h5c3知识且进行一定扩展
能使用jquery完成网页常见交互行为
实际工作开发当中能应对活动宣传页

全屏切换效果

通过鼠标的滚轮切换全屏页面

使用fullpage来完成
使用动画（js实现动画，css3实现动画）
- 一个是帧动画一个是补间动画
- 什么是帧动画：使用定时器每隔一段时间更改当前元素的状态
- 什么是补间动画：过渡(加过渡只要状态发生改变产出动画) 动画（多个节点来控制动画）性能会更好
- 在支持H5C3的的浏览器尽可能使用css3动画（移动端开发）
- transition animation
- transition 组合写法（transition:all 1s linear 1s）
  的拆分写法 transition-property transition-duration transition-timing-function transition-delay

转换

缩放 scale
位移 translate
旋转 rotate
倾斜 skew
以上四种转换方式是比较特殊，其实他们都是由 matrix 矩阵

动画速度

ease 先快后慢最后非常慢
linear 匀速
ease-in 速度越来越快
ease-out 速度越来越慢
ease-in-out 速度先快后慢
以上五种动画速度是比较特殊，其实他们都是由贝塞尔曲线来的

3d转换 translate3d rotate3d

2d转换和3d转换区别：
1.除了多了一个参数表示3d
2.在移动端使用3d转换可以优化性能（如果设备有3d加速引擎 GPU 可以提高性能 ,是2dz转换是无法调用GPU）

FullPage插件

插件功能介绍
- 基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。
- 支持鼠标滚动，支持前进后退和键盘控制，多个回调函数，
  支持手机、平板触摸事件，支持 CSS3 动画，支持窗口缩放，窗口缩放时自动调整，
  可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。
- 参考文档：http://www.dowebok.com/demo/2014/77/
- 原理：window.onmousewheel = function(){ console.log(‘ok’) };

使用步骤

引用文件

    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullPage.js"></script>

html结构

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

js初始化

$(function(){
    $('#fullpage').fullpage();
});

配置

选项	类型	默认值	说明
verticalCentered	字符串	true	内容是否垂直居中
resize	布尔值	false	字体是否随着窗口缩放而缩放
slidesColor	函数	无	设置背景颜色
anchors	数组	无	定义锚链接
scrollingSpeed	整数	700	滚动速度，单位为毫秒
easing	字符串	easeInQuart	滚动动画方式
menu	布尔值	false	绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation	布尔值	false	是否显示项目导航
navigationPosition	字符串	right	项目导航的位置，可选 left 或 right
navigationColor	字符串	#000	项目导航的颜色
navigationTooltips	数组	空	项目导航的 tip
slidesNavigation	布尔值	false	是否显示左右滑块的项目导航
slidesNavPosition	字符串	bottom	左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor	字符串	#fff	左右滑块的箭头的背景颜色
loopBottom	布尔值	false	滚动到最底部后是否滚回顶部
loopTop	布尔值	false	滚动到最顶部后是否滚底部
loopHorizontal	布尔值	true	左右滑块是否循环滑动
autoScrolling	布尔值	true	是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow	布尔值	false	内容超过满屏后是否显示滚动条
css3	布尔值	false	是否使用 CSS3 transforms 滚动
paddingTop	字符串	0	与顶部的距离
paddingBottom	字符串	0	与底部距离
fixedElements	字符串	无
normalScrollElements		无
keyboardScrolling	布尔值	true	是否使用键盘方向键导航
touchSensitivity	整数	5
continuousVertical	布尔值	false	是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor	布尔值	true
normalScrollElementTouchThreshold	整数	5	-

方法

名称	说明
moveSectionUp()	向上滚动
moveSectionDown()	向下滚动
moveTo(section, slide)	滚动到
moveSlideRight()	slide 向右滚动
moveSlideLeft()	slide 向左滚动
setAutoScrolling()	设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling()	添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()	添加或删除键盘方向键控制
setScrollingSpeed()	定义以毫秒为单位的滚动速度

回调函数

名称	说明
afterLoad	滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave	滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender	页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad	滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave	某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

搭建页面开发结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物网站宣传页面</title>
    <link rel="stylesheet" href="css/jquery.fullpage.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--更多精彩-->
<div class="more"><img src="images/00-more.png" alt=""></div>
<!--全屏滚动-->
<div class="container">
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullpage.min.js"></script>
<script>
    $(function() {
        $('.container').fullpage();
    })
</script>

完成八屏页面动画

模块一: 标题(title)
模块二: 商品列表(list)
模块三: 选购(buy)
模块四: 填写信息(info)
模块五: 付款(payment)
模块六: 送货(delivery)
模块七: 评价(appraise)
模块八: 购物(shopping)

具体需求参照示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车宣传</title>
    <link rel="stylesheet" href="css/jquery.fullpage.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--公用的元素-->
<a href="#" class="go"><img src="images/00-go.png" alt=""></a>
<a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a>
<!--整体容器-->
<!--1.指示器 点容器-->
<div class="container">
    <!--每一个切换的屏幕 背景-->
    <div class="section screen01">
        <!--如果是大屏幕 是基于top定位  脱离显示区域  固定在一个区域内  用一个固定大小的容器来装内容-->
        <div class="content">
            <!--商品列表，沙发，横幅-->
            <div class="goods"><img src="images/01-goods.png" alt=""></div>
            <div class="sofa"><img src="images/01-sofa.png" alt=""></div>
            <div class="fly"><img src="images/01-fly.png" alt=""></div>
        </div>
    </div>
    <!--第二屏  动画特点：完全进入当前屏的时候执行动画-->
    <!--1.什么时候完全进入-->
    <!--2.怎么做动画  给大容器追加一个类  在这个类下面可以给需要做动画的元素添加动画属性-->
    <div class="section screen02">
        <div class="content">
            <!--商品列表-->
            <div class="goods"><img src="images/02-goods.png" alt=""></div>
            <!--沙发-->
            <div class="sofa"><img src="images/02-sofa.png" alt=""></div>
            <!--输入框 搜索框 关键字-->
            <div class="input">
                <img class="search" src="images/02-search.png" alt="">
                <img class="key" src="images/02-key.png" alt="">
            </div>
            <!--文字-->
            <div class="text">
                <img class="text01" src="images/02-text1.png" alt="">
                <img class="text02" src="images/02-text2.png" alt="">
            </div>
        </div>
    </div>
    <!--active 默认显示的页面-->
    <div class="section screen03">
        <div class="content">
            <div class="sofa"><img src="images/02-sofa.png" alt=""></div>
            <div class="change">
                <img src="images/03-change01.gif" alt="">
                <img src="images/03-change02.gif" alt="">
            </div>
            <div class="cart">
                <img src="images/03-cart01.gif" alt="">
                <img src="images/03-cart02.gif" alt="">
            </div>
        </div>
    </div>
    <div class="section screen04">
        <div class="content">
            <!--白云-->
            <div class="cloud"><img src="images/04-cloud.png" alt=""></div>
            <!--文字-->
            <div class="text">
                <img src="images/04-text01.png" alt="">
                <img src="images/04-text02.png" alt="">
            </div>
            <!--购物车-->
            <div class="cart"><img src="images/04-cart.png" alt=""></div>
            <!--沙发-->
            <div class="sofa"><img src="images/02-sofa.png" alt=""></div>
            <!--收货地址-->
            <div class="address">
                <img src="images/04-address01.png" alt="">
                <img src="images/04-address02.png" alt="">
            </div>
        </div>
    </div>
    <div class="section screen05">
        <div class="content">
            <!--文字-->
            <div class="text"><img src="images/05-text.png" alt=""></div>
            <!--沙发-->
            <div class="sofa"><img src="images/02-sofa.png" alt=""></div>
            <!--银行卡-->
            <div class="card">
                <img class="cardImg" src="images/05-card.png" alt="">
                <img class="orderImg" src="images/05-order.png" alt="">
            </div>
            <!--点鼠标-->
            <div class="mouse">
                <img class="m1" src="images/05-mouse01.png" alt="">
                <img class="m2" src="images/05-mouse02.png" alt="">
                <img class="hand" src="images/05-hand.png" alt="">
            </div>
        </div>
    </div>
    <div class="section screen06">
        <div class="content">
            <!--白云-->
            <div class="cloud">
                <img src="images/06-cloud01.png" alt="">
                <img src="images/06-cloud02.png" alt="">
            </div>
            <!--文字-->
            <div class="text">
                <img src="images/06-text01.png" alt="">
                <img src="images/06-text02.png" alt="">
            </div>
            <!--盒子-->
            <div class="box"><img src="images/06-box.png" alt=""></div>
            <!--汽车-->
            <div class="car">
                <img class="carImg" src="images/06-car.png" alt="">
                <img class="buyer" src="images/06-buyer.png" alt="">
                <img class="address" src="images/06-address.png" alt="">
                <img class="worker" src="images/06-worker.png" alt="">
                <img class="say" src="images/06-say.png" alt="">
            </div>
            <!--收货人-->
            <div class="person">
                <img class="personImg" src="images/06-person.png" alt="">
                <img class="door" src="images/06-door.png" alt="">
            </div>
        </div>
    </div>
    <div class="section screen07">
        <div class="content">
            <div class="star">
                <img src="images/07-star.png" alt="">
                <img src="images/07-star.png" alt="">
                <img src="images/07-star.png" alt="">
                <img src="images/07-star.png" alt="">
                <img src="images/07-star.png" alt="">
            </div>
            <div class="text"><img src="images/07-text.png" alt=""></div>
        </div>
    </div>
    <div class="section screen08">
        <div class="content">
            <div class="btn">
                <img src="images/08-btn01.png" alt="">
                <img src="images/08-btn02.gif" alt="">
            </div>
            <div class="again"><img src="images/08-again.png" alt=""></div>
            <div class="hand"><img src="images/08-hand.png" alt=""></div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullpage.js"></script>
<script src="js/index.js"></script>
</body>
</html>

index.js

$(function () {
    /*初始化fullpage组件*/
    /*1.设置每一个屏幕的背景颜色*/
    /*2.设置屏幕内容的对齐方式  默认是垂直居中的  改成顶部对齐*/
    /*3.设置导航 设置指示器 点容器*/
    /*4.监听进入某一屏的时候 回调*/
    $('.container').fullpage({
        /*配置参数*/
        sectionsColor: ["#fadd67", "#84a2d4", "#ef674d", "#ffeedd", "#d04759", "#84d9ed", "#8ac060"],
        verticalCentered: false,
        navigation: true,
        afterLoad:function (link,index) {
            /*index 序号 1开始  当前屏的序号*/
            $('.section').eq(index-1).addClass('now');
        },
        /*离开某一个页面的时候触发*/
        onLeave:function (index,nextIndex,direction) {
            var currentSection = $('.section').eq(index-1);
            if(index == 2 && nextIndex == 3){
                /*当前是从第二页到第三页*/
                currentSection.addClass('leaved');
            }else if(index == 3 && nextIndex == 4){
                /*当前是从第三页到第四页*/
                currentSection.addClass('leaved');
            }else if(index == 5 && nextIndex == 6){
                /*当前是从第五页到第六页*/
                /*currentSection.removeClass('now').addClass('leaved');*/
                currentSection.addClass('leaved');
                $('.screen06 .box').addClass('show');
            }else if(index == 6 && nextIndex == 7){
                /*当前是从第6页到第7页*/
                $('.screen07 .star').addClass('show');
                $('.screen07 .text').addClass('show');
                $('.screen07 .star img').each(function (i, item) {
                    /*$(item) == $(this);*/
                    /*img display:none*/
                    /*$(this).delay(i*0.5*1000).fadeIn();*/
                    /*img opacity*/
                    $(this).css('transition-delay',i*0.5+'s');
                });

            }
        },
        /*最好在组件初始完毕或者插件内容渲染完毕*/
        afterRender:function () {
            /*console.log(this);*/
            /*this没有api方法*/

            /*jquery插件初始的时候封装这个方法*/
            /*1.回想jquery插件的封装 $.fn.fullpage = function(){} */
            /*2.jquery本身没有的方法通过$.fn的方式追加方法  认为是插件方法*/
            /*3.例如：$.fn.src = function(){ return this.attr('src') } this 你选择谁this（jquery对象）执行谁 */
            /*点击更多切换下一页*/
            $('.more').on('click',function () {
                $.fn.fullpage.moveSectionDown();
            });

            /*当第四屏的购物车动画结束之后执行收货地址的动画*/
            $('.screen04 .cart').on('transitionend',function () {
                /* :last :first :visible :hidden :checked :selected jquery扩展选择器*/
                $('.screen04 .address').show().find('img:last').fadeIn(1000);
                $('.screen04 .text').addClass('show');
            });


            /*第八屏功能*/
            /*1.手要跟着鼠标移动*/
            $('.screen08').on('mousemove',function (e) {
                /*鼠标的坐标设置给手*/
                $(this).find('.hand').css({
                    left:e.clientX -190,
                    top:e.clientY - 20
                });
            }).find('.again').on('click',function () {
                /*2.点击再来一次重置动画跳回第一页*/
                /*动画怎么怎么进行的？*/
                /*2.1 加now  类*/
                /*2.2 加leaved  类*/
                /*2.3 加show 类*/
                $('.now,.leaved,.show').removeClass('now').removeClass('leaved').removeClass('show');
                /*2.4 加css属性  后果：加一个style属性*/
                /*2.5 用jquery方法  show() fadeIn() 后果：加一个style属性*/
                $('.content [style]').removeAttr('style');

                /*跳回第一页*/
                $.fn.fullpage.moveTo(1);
            });
        },
        /*页面切换的时间 默认是700*/
        scrollingSpeed:1000
    });
});

index.css

/*公用的样式*/
.go {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: fixed;
    right: 30px;
    top: 30px;
    z-index: 1001;
}

.more {
    position: fixed;
    right: 60px;
    bottom: 80px;
    z-index: 1001;
    animation: more 0.3s linear infinite alternate;
}

/*内容容器*/
.content {
    width: 900px;
    height: 600px;
    /*background: rgba(0, 0, 0, 0.1);*/
    position: absolute;
    bottom: 0;
    left: 50%;
    /*提高层级*/
    /*transform: translateX(-50%);*/
    margin-left: -450px;
}
/*布局：定位 动画：位移*/
/*第一屏*/
.screen01{
    background: url("../images/01-bg.png") no-repeat center bottom;
}
.screen01 .goods{
    text-align: center;
    margin-top:230px;
}
.screen01 .sofa{
    position: absolute;
    left: 230px;
    top: 150px;
    animation: more 0.8s linear infinite alternate;
}
.screen01 .fly{
    position: absolute;
    right: -50px;
    top: 20px;
    /*调用动画*/
    animation: fly01 1s linear infinite alternate;/*无穷次*//*逆播放*/
}
/*第一屏动画*/
/*1.定义动画序列*/
@keyframes fly01 {
    from{
        transform: translateY(-30px);
    }
    /*50%{
        transform: translateY(50px);
    }*/
    to{
        transform: translateY(30px);
    }
}
@keyframes more{
    from{
        transform: translateY(-10px);
    }
    to{
        transform: translateY(10px);
    }
}
@keyframes sofa01{
    from{
        transform: translateY(-20px);
    }
    to{
        transform: translateY(20px);
    }
}

/*第二屏*/
/*使用位移动画需要使用块级元素*/
.screen02{
    background: url("../images/02-bg.png") no-repeat center bottom;
}
.screen02 .goods{
    position: absolute;
    left: 50%;
    margin-left: -220px;
    bottom: 210px;
    transform-origin: right bottom;
    transform: scale(0);
}
.screen02 .sofa{
    transform: scale(0.5);
    position: absolute;
    left: 292px;
    top: 132px;
    opacity: 0;
    z-index: 1001;
}
.screen02 .input{
    position: absolute;
    right: 171px;
    top: 120px;
    /*右上角 transform: scale(0.7);*/
    /*中心位置 transform: translate(-180px,130px);*/
    /*最右边的位子  transform: translate(2000px,130px);*/
    /*默认的转换原点中心 */
    transform-origin: right top;
    opacity: 0;
}
.screen02 .input .search{}
.screen02 .input .key{
    position: absolute;
    left: 100px;
    top: 4px;
    opacity: 0;
}
.screen02 .text{
    text-align: center;
}
.screen02 .text .text01{}
.screen02 .text .text02{
    /*display: none;*/
    position: absolute;
    opacity: 0;
}

/*第二屏动画*/
.screen02.now .text .text01{
    position: absolute;
    opacity: 0;
}
.screen02.now .text .text02{
    position: static;
    opacity: 1;
    transition: opacity 1s;
}
.screen02.now .input{
    /*动画播放完成状态控制  默认属性backwards(回到起点) forwards(保持)*/
    animation: input02 3s linear forwards;
}
.screen02.now .input .key{
    opacity: 1;
    transition: all 1s linear 1s;
}
.screen02.now .goods{
    /*none 清空所有转换属性*/
    transform: none;
    transition: all 1s linear 2s;
}
/*1.搜索框在右边动画的出来 */
/*2.在显示器中间停留  显示关键字*/
/*3.商品列表动画显示  搜索框动画位移到右上角*/
@keyframes input02 {
    0%{
        /*初始元素的位子*/
        opacity: 1;
        transform: translate(2000px,130px);
    }
    33.3%{
        transform: translate(-180px,130px);
    }
    67%{
        transform: translate(-180px,130px);
    }
    100%{
        opacity: 1;
        transform: scale(0.7);
    }
}
/*沙发做动画  当离开第二屏  和页面的滚动同步 动画时间保持一致*/
.screen02.leaved .sofa{
    animation: sofa02 1s linear;
}
@keyframes sofa02 {
    from{
        opacity: 1;
    }
    to{
        opacity: 1;
        /*沙发下移*/
        transform: translate(-80px,700px);
    }
}



/*第三屏*/
.screen03{
    background: url("../images/03-bg.png") no-repeat center bottom;
}
.screen03 .sofa{
    position: absolute;
    left: 212px;
    top: 180px;
    display: none;
}
.screen03 .change{
    position: absolute;
    right: 115px;
    bottom: 170px;
}
.screen03 .change img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03 .cart{
    position: absolute;
    right: 192px;
    bottom: 100px;
}
.screen03 .cart img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03.now .change img:first-child{
    display: none;
}
.screen03.now .change img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}
.screen03.now .cart img:first-child{
    display: none;
}
.screen03.now .cart img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}
.screen03.now .sofa{
    display: block;
    z-index: 1001;
}

.screen03.leaved .sofa{
    /*1.组合写法  多个转换属性之间空格  transform:rotate() translateX() skew() scale()*/
    /*2.如果你先旋转  那么坐标轴也会旋转*/
    /*3. 最好是先位移在旋转*/
    animation: sofa03 1s linear;
}
@keyframes sofa03 {
    from{}
    to{
        transform: translate(190px,666px) rotate(45deg);
    }
}



/*第四屏*/
.screen04{
    background: url("../images/04-bg.png") no-repeat center bottom;
}
.screen04 .cloud{
    position: absolute;
    left: -400px;
    top: -50px;
    animation: cloud04 20s linear infinite alternate;
}
@keyframes cloud04 {
    from{

    }
    to{
        transform: translateX(1000px);
    }
}
.screen04 .text{
    text-align: center;
    margin-top: 120px;
}
.screen04 .text img:last-child{
    position: absolute;
    opacity: 0;
}
.screen04 .text.show img:first-child{
    position: absolute;
    opacity: 0;
}
.screen04 .text.show img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}

.screen04 .cart{
    text-align: center;
    margin-top: 50px;
    position: relative;
    z-index: 1002;
}
.screen04 .sofa{
    position: absolute;
    top: 200px;
    left: 420px;
    transform: rotate(45deg);
    /*display: none;*/
    opacity: 0;
}
.screen04 .address{
    position: absolute;
    width: 283px;
    height: 270px;
    left: 50%;
    /*css3的居中 基于本身*/
    transform: translateX(-50%);
    bottom: 150px;
    display: none;
}
.screen04 .address img:last-child{
    position: absolute;
    top: 60px;
    left: 50%;
    /*css3的居中 基于本身*/
    transform: translateX(-50%);
    z-index: 1;
    display: none;
}


/*1.掐时间  做延时  完成动画的衔接*/
/*2.jquery的动画  $('dom').animate(property,duration,speed,callback) */
/*speed  (swing linear) */
/*3.能不能监听到动画或者过度的结束*/
/*4.css3当中 过渡 transitionend  动画 animationend*/
.screen04.now .sofa{
    opacity: 1;
    transform: translateX(1000px);
    transition: transform 3s;
}
.screen04.now .cart{
    transition: all 3s;
    transform: translateX(1000px);
}


/*第五屏*/
.screen05{
    background: url("../images/05-bg.png");
}
.screen05 .sofa{
    position: absolute;
    bottom: 100px;
    left: 100px;
    transform: rotate(30deg);
    opacity: 0;
    /*transform:translateY(-150px) rotate(30deg);*/
    z-index: 1001;
}
.screen05 .card{
    position: absolute;
    left: 0;
    bottom: 210px;
    z-index: 1002;
}
.screen05 .card .cardImg{
    position: relative;
    z-index: 1;
}
.screen05 .card .orderImg{
    position: absolute;
    left: 130px;
    top: -80px;
    transform: translateY(80px);
}
.screen05 .content{
    height: 100%;
    background: rgba(0,0,0,0.2);
}
.screen05 .mouse{
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: 400px;
}
.screen05 .mouse .m1,
.screen05 .mouse .m2{
    position: absolute;
    bottom: 240px;
    right: 0;
}
.screen05 .mouse .m2{
    opacity: 0;
}
.screen05 .mouse .hand{
    position: absolute;
    bottom:0;
    right: 50px;
    transform: translateY(500px);
}
.screen05 .text{
    position: absolute;
    bottom: 550px;
    left: 0;
}

/*动画*/
.screen05.now .mouse .hand{
    transition: all 1s linear;
    transform: none;
}
.screen05.now  .mouse .m2{
    transition: all 0.2s linear 1s;
    opacity: 1;
}
.screen05.now .sofa{
    animation: sofa05 2s linear 1.2s forwards;
}
@keyframes sofa05 {
    from{
        transform: translateY(-1000px) rotate(30deg);
        opacity: 1;
    }
    50%{
        transform: translateY(-150px) rotate(30deg);
    }
    100%{
        opacity: 1;
        transform:rotate(30deg);
    }
}
.screen05.now .card .orderImg{
    transition: all 1s linear 2.2s;
    transform: none;
}

.screen05.leaved .sofa{
    /*transform: translateY(700px) scale(0.2) rotate(30deg);
    transition: all 1s linear;
    opacity: 1;*/
    animation: sofa05-06 1s linear ;
}
@keyframes  sofa05-06{
    from{
        opacity: 1;
        transform:  rotate(30deg);
    }
    to{
        opacity: 1;
        transform: translateY(450px) scale(0.2) rotate(30deg);
    }
}

    /*背景*/
.screen06{
    background: url("../images/06-bg.png") no-repeat 25% bottom;
}
.screen06.now{
    transition: background 1s linear 1s;
    background: url("../images/06-bg.png") no-repeat 100% bottom;
}
.screen06 .cloud{
    position: absolute;
    top: -50px;
    left: 0;
}
.screen06 .cloud img:first-child{
    animation: cloud06 40s linear infinite alternate;
}
.screen06 .cloud img:last-child{
    position: absolute;
    top: 0;
    left: 0;
    animation: cloud06 20s linear infinite alternate;
}
@keyframes cloud06 {
    from{}
    to{
        transform: translateX(1000px);
    }
}

.screen06 .text{
    position: absolute;
    top: 80px;
    left: 140px;
}
.screen06 .text img:last-child{
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
}
.screen06 .box{
    position: absolute;
    top: 150px;
    left: 140px;
    z-index: 1002;
}
.screen06 .box.show{
    animation: box06 2s linear forwards;
}
@keyframes box06 {
    from{
        transform: translateX(-500px);
    }
    50%{
        transform: none;
    }
    to{
        transform:translateY(330px) scale(0.3);
    }
}


.screen06 .car{
    position: absolute;
    bottom: 0;
    left: 100px;
    z-index: 1003;
    width: 221px;
    height: 122px;
}

.screen06 .car img{
    position: absolute;
    opacity:0;
/*    left: 0;
    top: 0;*/
}
.screen06 .car .carImg{
    opacity: 1;
    position: relative;
}
.screen06 .car .buyer{
    left: 160px;
    top: -50px;
}
.screen06 .car .address{
    left: 160px;
    top: -50px;
}
.screen06.now .car .buyer{
    transition: all 0.25s 1.25s;
    opacity: 1;
}
.screen06.now .car .address{
    transition: all 0.25s 1.75s;
    opacity: 1;
}
.screen06 .car .worker{
    left: 0;
    bottom: 0;
    opacity: 1;
    transform: scale(0);
    transform-origin: left bottom;
}
.screen06.now .car .worker{
    animation: worker06 2.1s linear 2s forwards;
}
.screen06.now .text img:first-child{
    opacity: 0;
    transition: all 0.1s linear 4.6s;
}
.screen06.now .text img:last-child{
    opacity: 1;
    transition: all 1s linear 4.6s;
}

@keyframes worker06 {
    from{
        opacity: 1;
    }
    33.3%{
        transform: scale(1);
    }
    66.7%{
        transform: scale(1) translateY(-100px);
    }
    100%{
        opacity: 1;
        transform: scale(1) translateY(-100px) translateX(200px);
    }
}

.screen06 .car .say{
    right: -280px;
    top: -400px;
}
.screen06.now .car .say{
    opacity: 1;
    transition: all 0.5s linear 4.1s;
}

.screen06 .person{
    width: 106px;
    height: 150px;
    position: absolute;
    right: 50px;
    bottom: 116px;
}
.screen06 .person .door{
    opacity: 0;
}
.screen06 .person .personImg{
    position: absolute;
    right: 0;
    bottom: 0;
    transform-origin: right bottom;
    transform: scale(0);
}
.screen06.now .person .door{
    opacity: 1;
    transition: all 0.4s linear 4.6s;
}
.screen06.now .person .personImg{
    transform: none;
    right: 150px;
    /*注意一点：不同同样的属性状态改变*/
    transition: transform 0.5s linear 5s,right 0.5s linear 5.5s;
}



/*第7屏*/
.screen07{
    background: url("../images/07-bg.png") no-repeat center bottom;
}
.screen07 .star{
    position: absolute;
    left: 157px;
    top: 141px;
}
.screen07 .star img{
    float: left;
    margin-right: 6px;
    /*display: none;*/
    opacity: 0;
}
.screen07 .star.show img{
    opacity: 1;
    transition: all 0.3s linear;
}
.screen07 .text{
    position: absolute;
    left: 157px;
    top: 180px;
    opacity: 0;
    transform-origin: left bottom;
    transform: scale(0);
}
.screen07 .text.show{
    opacity: 1;
/*    transform: none;
    transition: all 1s linear 2.3s;*/
    animation: text07 1.5s linear 2.3s forwards;
}
@keyframes text07 {
    from{}
    70%{
        transform: scale(1.2);
    }
    to{
        transform: none;
    }
}

/*第8屏*/
.screen08{
    background: url("../images/08-bg.png");
}
.screen08 .btn{
    width: 389px;
    height: 160px;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
}
.screen08 .btn img:last-child{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.screen08 .btn:hover img:last-child{
    opacity: 1;
}
.screen08 .again{
    position: absolute;
    right: 0;
    top: 80px;
}
.screen08 .hand{
    position: absolute;
    left:50%;
    top: 100px;
    transform: translateX(-50%);
    /*margin-left:-85px;*/
}

补充知识（扩展知识）

由于浏览器兼容问题，没有广泛使用，大家了解即可。

唯恋殊雨

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
Web前端学习笔记——HTML5与CSS3之购物车宣传案例

《购物车宣传》案例综合运用h5c3知识且进行一定扩展能使用jquery完成网页常见交互行为实际工作开发当中能应对活动宣传页全屏切换效果通过鼠标的滚轮切换全屏页面使用fullpage来完成使用动画（js实现动画，css3实现动画）一个是帧动画一个是补间动画什么是帧动画：使用定时器每隔一段时间更改当前元素的状态什么是补间动画：过渡(加过渡只要状态发生改...
复制链接

扫一扫