Web前端学习笔记——HTML5与CSS3之购物车宣传案例
2024-05-11 10:22:34
《购物车宣传》案例
综合运用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="data: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="data:images/00-go.png" alt=""></a>
<a href="javascript:;" class="more"><img src="data:images/00-more.png" alt=""></a>
<!--整体容器-->
<!--1.指示器 点容器-->
<div class="container"><!--每一个切换的屏幕 背景--><div class="section screen01"><!--如果是大屏幕 是基于top定位 脱离显示区域 固定在一个区域内 用一个固定大小的容器来装内容--><div class="content"><!--商品列表，沙发，横幅--><div class="goods"><img src="data:images/01-goods.png" alt=""></div><div class="sofa"><img src="data:images/01-sofa.png" alt=""></div><div class="fly"><img src="data:images/01-fly.png" alt=""></div></div></div><!--第二屏 动画特点：完全进入当前屏的时候执行动画--><!--1.什么时候完全进入--><!--2.怎么做动画 给大容器追加一个类 在这个类下面可以给需要做动画的元素添加动画属性--><div class="section screen02"><div class="content"><!--商品列表--><div class="goods"><img src="data:images/02-goods.png" alt=""></div><!--沙发--><div class="sofa"><img src="data:images/02-sofa.png" alt=""></div><!--输入框 搜索框 关键字--><div class="input"><img class="search" src="data:images/02-search.png" alt=""><img class="key" src="data:images/02-key.png" alt=""></div><!--文字--><div class="text"><img class="text01" src="data:images/02-text1.png" alt=""><img class="text02" src="data:images/02-text2.png" alt=""></div></div></div><!--active 默认显示的页面--><div class="section screen03"><div class="content"><div class="sofa"><img src="data:images/02-sofa.png" alt=""></div><div class="change"><img src="data:images/03-change01.gif" alt=""><img src="data:images/03-change02.gif" alt=""></div><div class="cart"><img src="data:images/03-cart01.gif" alt=""><img src="data:images/03-cart02.gif" alt=""></div></div></div><div class="section screen04"><div class="content"><!--白云--><div class="cloud"><img src="data:images/04-cloud.png" alt=""></div><!--文字--><div class="text"><img src="data:images/04-text01.png" alt=""><img src="data:images/04-text02.png" alt=""></div><!--购物车--><div class="cart"><img src="data:images/04-cart.png" alt=""></div><!--沙发--><div class="sofa"><img src="data:images/02-sofa.png" alt=""></div><!--收货地址--><div class="address"><img src="data:images/04-address01.png" alt=""><img src="data:images/04-address02.png" alt=""></div></div></div><div class="section screen05"><div class="content"><!--文字--><div class="text"><img src="data:images/05-text.png" alt=""></div><!--沙发--><div class="sofa"><img src="data:images/02-sofa.png" alt=""></div><!--银行卡--><div class="card"><img class="cardImg" src="data:images/05-card.png" alt=""><img class="orderImg" src="data:images/05-order.png" alt=""></div><!--点鼠标--><div class="mouse"><img class="m1" src="data:images/05-mouse01.png" alt=""><img class="m2" src="data:images/05-mouse02.png" alt=""><img class="hand" src="data:images/05-hand.png" alt=""></div></div></div><div class="section screen06"><div class="content"><!--白云--><div class="cloud"><img src="data:images/06-cloud01.png" alt=""><img src="data:images/06-cloud02.png" alt=""></div><!--文字--><div class="text"><img src="data:images/06-text01.png" alt=""><img src="data:images/06-text02.png" alt=""></div><!--盒子--><div class="box"><img src="data:images/06-box.png" alt=""></div><!--汽车--><div class="car"><img class="carImg" src="data:images/06-car.png" alt=""><img class="buyer" src="data:images/06-buyer.png" alt=""><img class="address" src="data:images/06-address.png" alt=""><img class="worker" src="data:images/06-worker.png" alt=""><img class="say" src="data:images/06-say.png" alt=""></div><!--收货人--><div class="person"><img class="personImg" src="data:images/06-person.png" alt=""><img class="door" src="data:images/06-door.png" alt=""></div></div></div><div class="section screen07"><div class="content"><div class="star"><img src="data:images/07-star.png" alt=""><img src="data:images/07-star.png" alt=""><img src="data:images/07-star.png" alt=""><img src="data:images/07-star.png" alt=""><img src="data:images/07-star.png" alt=""></div><div class="text"><img src="data:images/07-text.png" alt=""></div></div></div><div class="section screen08"><div class="content"><div class="btn"><img src="data:images/08-btn01.png" alt=""><img src="data:images/08-btn02.gif" alt=""></div><div class="again"><img src="data:images/08-again.png" alt=""></div><div class="hand"><img src="data: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;*/
}补充知识（扩展知识）
- 由于浏览器兼容问题，没有广泛使用，大家了解即可。
Web前端学习笔记——HTML5与CSS3之购物车宣传案例相关推荐
- Web前端学习笔记——HTML5与CSS3之QQ TIM案例
<QQ TIM>案例 Stellar插件 描述 视差滚动(Parallax Scrolling)指网页滚动过程中, 多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术 主 ...
- web前端学习笔记（最新）
web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
- 前端学习笔记 HTML5 保姆级教程
HTML5 保姆级教程 前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...
- Web前端学习笔记（1）
文章目录 一.第一部分 1.1内容一 Web前端导入 二.第二部分 2.1内容一 HTML和CSS的定义 三.第三部分 3.1内容一 宇宙第一编译器Vs Code 3.2内容二 快捷键的使用 四.第四 ...
- web前端学习笔记总页面
学习资料 自学视频 求知讲堂web前端html+css 参考文档 MDN 书单 你不知道JavaScript JavaScript设计模式和开发实践 css世界 css揭秘 什么是web前端开发 we ...
- 极客学院web前端学习笔记 （一）概况
终于到暑假啦!暑假开始重新(x)学习web前端,其实html和css早已有所接触,但是js接触较少,直接原因是下学期大概要给学弟学妹们解答一些前端基础相关的问题,所以希望在暑假好好整理归纳一下知识体系 ...
- web前端学习笔记——JQuery
web前端开发基础 第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...
- web前端学习笔记（初识HTML）
目录 1.简介 2.Html的历史: 3.常用的工具 4.网页的基本信息: 5.网页的标签: 6.安装我们的idea 7.配置idea 8.特殊符号: 9.链接标签: 10.锚链接: 11.功能性链接 ...
- Web前端学习笔记学习路线图
随着互联网的快速发展, web前端行业发展前景较好,虽然web前端薪资高入门门槛低, 但是俗话说的好:入门容易,精通难.web前端开发的知识点繁多,所以,要想真正全部掌握web前端工程师开发技能,并非 ...
最新文章
- Signalr实时通讯
- python字符串截取拼接_Python字符串拼接、截取及替换方法总结分析
- [深度学习-理论篇]什么是卷积神经网络CNN
- hutool 取前12个月_Excel – 创建 12 个月的工资表模板，我只要 20 秒
- 网络图片 base64 java_java图片转base64和真实的结果不一样
- 如何在Java中将字节数组转换为十六进制字符串？
- Java9的GI垃圾回收器
- JDK18 Java 18 拥有 9 个新特性
- 算法在岗3年小结：模型策略篇
- 类静态初始化块即将纳入ES2022，我们先一睹为快
- 世界上顶级英文歌曲首选
- egret eui.Button改变文本、背景色及是否可点击
- 用Python把文字转换成语音，抠脚大汉秒变撒娇萌妹，想想不寒而栗
- html斜线背景,PS斜线底纹如何制作？
- 7-148 试试多线程 (10 分)
- 系统的学习网络编程，这篇就够了!（来收藏夹里吃灰）
- Python编程的一些实例（1）
- correl函数_教你利用Correl函数返回相关系数并确定属性关系
- 单例模式（饿汉单例模式and懒汉单例模式）
- java time_java常用类Time