Web前端学习笔记——HTML5与CSS3之购物车宣传案例
《购物车宣传》案例
综合运用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个参数 |
搭建页面开发结构
<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
<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>
<div class="container">
<div class="section screen01">
<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>
<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>
<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;*/
}
补充知识（扩展知识）
- 由于浏览器兼容问题，没有广泛使用，大家了解即可。
