前端基础学习之h5c3-购物车宣传页动画小练习

最新推荐文章于 2021-05-26 14:16:14 发布
最新推荐文章于 2021-05-26 14:16:14 发布
阅读量969 收藏 4
点赞数 2
分类专栏： 前端学习基础记录 文章标签： javascript css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua222/article/details/109525716
版权

在这里插入图片描述
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车宣传页</title>
    <link rel="stylesheet" href="css/jquery.fullpage.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        /* .section:first-child{
            background-color: brown;
        }
        .section:nth-child(2){
            background-color: cadetblue;
        }
        .section:nth-child(3){
            background-color: coral;
        } */
    </style>
</head>
<body>
    <!-- 公用元素 -->
    <a href="#" class="go"><img src="images/00-go.png" alt=""></a>
    <a href="#" class="more"><img src="images/00-more.png" alt=""></a>
    <!-- 整体容器 -->
    <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 src="images/02-search.png" alt="" class="search">
                    <img src="images/02-key.png" alt="" class="keyword">
                </div>
                <!-- 文字 -->
                <div class="text">
                    <img src="images/02-text1.png" alt="" class="text1">
                    <img src="images/02-text2.png" alt="" class="text2">
                </div>
            </div>
        </div>
        <!-- active fullpage 内置类名 默认显示当前页即可使用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 src="images/05-order.png" alt="" class="orderImg">
                    <img src="images/05-card.png" alt="" class="cardImg">
                </div>
                <!-- 点鼠标 -->
                <div class="mouse">
                    <img src="images/05-mouse01.png" alt="" class="m1">
                    <img src="images/05-mouse02.png" alt="" class="m2">
                    <img src="images/05-hand.png" alt="" class="hand">
                </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="hands">
                    <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.css:

/* 公共元素样式 */
.go{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 40px;
    right: 40px;
    position: fixed;
    z-index: 1001;
}
.more{
    position: fixed;
    right: 60px;
    bottom: 80px;
    z-index: 10001;
    animation: more01 0.3s linear infinite alternate;
}
/* 布局：定位 动画：位移 */
/* 第一屏样式 */
.screen01{
    background: url("../images/01-bg.png") no-repeat center bottom;
}
.content{
    width: 900px;
    height: 600px;
    position: absolute;
    left: 50%;
    margin-left: -450px;
    bottom: 0;
    /* background-color:rgba(0, 0, 0, .1); */
    
}
.screen01 .goods{
    text-align: center;
    margin-top: 200px;
}
.screen01 .sofa{
    position: absolute;
    left: 230px;
    top: 150px;
    animation: sofa01 0.8s linear infinite alternate;
}
.screen01 .fly{
    position: absolute;
    top: 20px;
    right: -50px;
    animation: fly01 1s linear infinite alternate;/*匀速 无穷次 逆播放 */
}
/* 第一屏动画 */
/* 01.声明动画序列 */
@keyframes fly01{
     from{ /*等同于0% */
        transform: translateY(-30px);
    }
    to{ /*等同于100% */
        transform: translateY(30px);
    }
}
@keyframes sofa01{
    from{ /*等同于0% */
       transform: translateY(-20px);
   }
   to{ /*等同于100% */
       transform: translateY(20px);
   }
}
@keyframes more01{
    from{ /*等同于0% */
       transform: translateY(-10px);
   }
   to{ /*等同于100% */
       transform: translateY(10px);
   }
}

/* 第二屏样式 */
.screen02{
    background: url("../images/02-bg.png") no-repeat center bottom;
}
.screen02 .goods{
    position: absolute;
    left: 50%;
    margin-left: -220px;
    top: 170px;
    transform-origin: right bottom;
    transform: scale(0);
}
.screen02 .sofa{
    position: absolute;
    left: 290px;
    top: 132px;
    transform: scale(0.5);
    opacity: 0;
    z-index: 1001;
}
.screen02 .input{ 
    position: absolute;
    right: 180px;
    top: 120px;
    /* transform: scale(0.7); */
    transform-origin: right top;
    opacity: 0;
  }
/* .screen02 .search{} */
.screen02 .keyword{
    position: absolute;
    left: 100px;
    top: 5px;
    opacity: 0;
}
.screen02 .text{
    text-align: center;
}
/* .screen02 .text1{} */
.screen02 .text2{
    position: absolute;
    opacity: 0;
}

/* 第二屏的动画 */
.screen02.now .goods{
    transform: scale(1);
    transition: transform 1s linear 2s;
}
.screen02.now .input{
     /* 动画结束时停留在最后一个状态 forwards */
     animation: input02 3s linear forwards;
}
.screen02.now .keyword{
    opacity: 1;
    transition: opacity 1s linear 1s;
}
.screen02.now .text1{
    position: absolute;
    opacity: 0;
    /* transition: opacity 1s linear; */
}
.screen02.now .text2{
    position: static;
    opacity: 1;
    transition: opacity 1s linear;
}
.screen02.leaved .sofa{
    animation: sofa02 1s linear;
}

/* 动画声明序列 */
@keyframes input02{
    /* 1.在最右侧 */
    /* 2.在电脑屏幕中间 */
    /* 3.停留在电脑屏幕中间--给关键字显示的动画时间 */
    /* 4.移到右上角 */
    /* 1-2 2-3 3-4 需要4个动画节点 */
    0%{
        transform: translate(1200px,130px);
        opacity: 1;
    }

    33.33%{
        transform: translate(-160px,130px);
    }

    67%{
        transform: translate(-160px,130px);
    }

    100%{
        transform: scale(0.7);
        opacity: 1;
    }
}

@keyframes sofa02{
    from{
        opacity: 1;
    }
    to{
        transform: translate(-75px,1020px);
        opacity: 1;
    }
}

/* 第三屏的样式 */
.screen03{
    background: url("../images/03-bg.png") no-repeat center bottom;
}
.screen03 .sofa{
    position: absolute;
    top: 175px;
    left: 215px;
    display: none;
}
.screen03 .change img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03 .change{
    position: absolute;
    left: 490px;
    top: 300px;
}
.screen03 .change img:first-child{
    position: absolute;
}
.screen03 .cart img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03 .cart{
    position: absolute;
    left: 490px;
    top: 440px;
}
.screen03 .cart img:first-child{
    position: absolute;
}
/* 第二页进入第三页时的样式转换及动画效果 */
.screen03.now .sofa{
    display: block;
    z-index: 10001;
}
.screen03.now .change img:last-child{
    opacity:1;
    transition: all 1s linear;
}
.screen03.now .change img:first-child{
    opacity: 0;
}
.screen03.now .cart img:last-child{
    opacity: 1;
    transition: all 1s linear;
}
.screen03.now .cart img:first-child{
    opacity: 0;
}
/* 第三屏进入第四屏的动画效果 */
.screen03.leaved .sofa{
    /* transform: translate(200px,990px) rotate(45deg); */
    /* transition: all 1s linear; */
    animation: sofa03 1s linear;
}
@keyframes sofa03{
    from{

    }
    to{
        transform: translate(190px,970px) rotate(45deg);
    }
}

/* 第四屏样式 */
.screen04{
    background: url(../images/04-bg.png) no-repeat center bottom;
}
.screen04 .cloud{
    position: absolute;
    top: -50px;
    left: -400px;
    animation: cloud04 20s linear infinite alternate;
}
.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{
    position: relative;
    text-align: center;
    margin-top: 50px;
    z-index: 1;
}
.screen04 .sofa{
    position: absolute;
    top: 190px;
    left: 400px;
    transform: rotate(45deg);
    opacity: 0;
}
.screen04 .address{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100px;
    width: 283px;
    display: none;
}
.screen04 .address img:last-child{
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.screen04.now .cart{
    transform: translateX(1200px);
    transition: transform 3s linear;
}
.screen04.now .sofa{
    opacity: 1;
    transform: translateX(1200px);
    transition: transform 3s linear;
}
/* 动画结束监听 */
/* 1.css 通过掐时间 */
/* 2.js 监听动画结束事件 transitionend animationend */
/* jquery设置动画 $(选择器).animate(property,duration,speed,callback) */
/* 第四屏的动画 */
@keyframes cloud04{
    from{

    }
    to{
        transform: translateX(1000px);
    }
}

/* 第五屏的样式 */
.screen05{
    background: url(../images/05-bg.png);
}
.screen05 .content{
    height: 100%;
}
.screen05 .text{
    position: absolute;
    left: 0;
    bottom: 550px;
}
.screen05 .sofa{
    position: absolute;
    /* top: 340px; */
    bottom: 150px;
    left: 120px;
    transform: rotate(30deg);
    opacity: 0;
    z-index: 1001;
}
.screen05 .card{
    position: absolute;
    left: 0;
    /* top: 130px; */
    bottom: 240px;
}
.screen05 .cardImg{
    position: relative;
    z-index: 1002;
}
.screen05 .orderImg{
    position: absolute;
    left: 120px;
    top: -80px;
    transform: translateY(100px);
}
.screen05 .mouse{
    position: absolute;
    right: 0;
    top: 0;
    width: 400px;
    height: 100%;
    overflow: hidden;
}
.screen05 .m1, .screen05 .m2{
    position: absolute;
    left: 150px;
    bottom: 265px;
    /* top: -415px; */
}
.screen05 .m2{
    opacity: 0;
}
.screen05 .hand{
    position: absolute;
    left: 130px;
    /* top: 260px; */
    bottom: 40px;
    transform: translateY(400px);    
}
/* 第五屏动画 */
.screen05.now .hand{
    transform: none;
    transition: all 1s linear;
}
.screen05.now .m2{
    opacity: 1;
    transition: all 0.2s linear 1s;
}
.screen05.now .sofa{
    animation: sofa05 2s linear 1.2s forwards;
}
.screen05.now .orderImg{
    transform: none;
    transition: all 1s linear 2.2s;
}
@keyframes sofa05{
    0%{
        transform: translateY(-1000px) rotate(30deg);
        opacity: 1;
    }
    50%{
        transform: translateY(-100px) rotate(30deg);
    }
    100%{
        transform: rotate(30deg);
        opacity: 1;
    }
}
/* 第五屏离开时的沙发动画 */
.screen05.leaved .sofa{
    animation: sofa05-06 1s linear;
}
@keyframes sofa05-06{
    from{
        transform: rotate(30deg);
        opacity: 1;
    }
    to{
        transform: translateY(800px) scale(0.2) rotate(30deg);
        opacity: 1;
    }
}
/* 第六屏样式 */
.screen06{
    width: 100%;
    height: 100%;
    background: url(../images/06-bg.png) no-repeat 20% bottom;
      /* 背景图的定位百分比-- 例如25%--是基于盒子的宽度1000-图片显示的大小800 ---即left:(1000-800)*25%=======left 50px
            如果盒子1000，图片显示宽度也是1000 那么无论百分比是多少，都是left 0 即默认的left */
}
.screen06.now{
    background: url(../images/06-bg.png) no-repeat 100% bottom;
    transition: all 1s linear 1s;
}
.screen06 .cloud{
    position: absolute;
    top: -50px;
    left: 0;
}
.screen06 .cloud img:first-child{
    /* position: absolute; */
    animation: cloud06 40s linear infinite alternate;
}
.screen06 .cloud img:last-child{
    position: absolute;
    left: 0;
    top: 0;
    animation: cloud06 20s linear infinite alternate;
}
.screen06 .text{
    position: absolute;
    top: 80px;
    left: 130px;
}
.screen06 .text img:last-child{
    position: absolute;
    opacity: 0;
}
.screen06 .box{
    position: absolute;
    top: 150px;
    left: 165px;
    z-index: 1002;
}
.screen06 .box.show{
    animation: box06 2s linear forwards;
}
/* 第六屏动画 */
@keyframes cloud06{
    from{

    }
    to{
        transform: translateX(1000px);
    }
}
@keyframes box06{
    0%{
        transform: translateX(-900px);
    }
    50%{
        transform: none;
    }
    100%{
        transform: translateY(320px) scale(0.3);
    }
}

.screen06 .car{
    position: absolute;
    left: 160px;
    bottom: 0;
    width: 221px;
    height: 122px;
}
.screen06 .car img{
    position: absolute;
    opacity: 0;
}
.screen06 .car .carImg{
    position: relative;
    left: 0;
    bottom: 0;
    opacity: 1;
    z-index: 1003;
}
.screen06.now .car .buyer{
    right: 0;
    top: -60px;
    opacity: 1;
    transition: all 0.25s linear 1.25s;
}
.screen06.now .car .address{
    right: 0;
    top: -60px;
    opacity: 1;
    transition: all 0.25s linear 1.75s;
}
.screen06.now .car .worker{
    left: 0;
    bottom: 0;
    z-index: 1004;
    transform-origin: left bottom;
    animation: worker06 2.1s linear 2s forwards;
    /* opacity: 1; */
}
@keyframes worker06{
    0%{
        opacity: 1;
        transform: scale(0);
    }
    33.33%{
        transform: scale(1);
    }
    67%{
        transform: translateY(-100px);
    }
    100%{
        transform: translateY(-100px) translateX(100px);
        opacity: 1;
    }
}
.screen06.now .say{
    left: 240px;
    top: -400px;
    opacity: 1;
    transition: all 1s linear 4.1s;
}
.screen06 .person{
    position: absolute;
    right: -226px;
    bottom: 116px;
    width: 106px;
    height: 150px;
}
.screen06 .person img{
    opacity: 0;
    position: absolute;
}
.screen06.now .person .door{
    opacity: 1;
    transition: all 0.2s linear 5.1s;
}
.screen06.now .person .personImg{
    bottom: 0;
    right: 0;
    transform-origin: right bottom;
    z-index: 1005;
    animation: personImg06 1.6s linear 5.3s forwards;
}
@keyframes personImg06{
    0%{
        opacity: 1;
        transform: scale(0);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: translateX(-400px);
        opacity: 1;
    }
}

.screen06.now .text img:first-child{
    opacity: 0;
    transition: all 0.1s linear 5.1s;
}
.screen06.now .text img:last-child{
    position: absolute;
    opacity: 1;
    transition: all 1s linear 5.1s;
    left: 0;
    top: 0;
}

/* 第七屏的样式 */
.screen07{
    /* width: 100%;
    height: 100%; */
    background: url(../images/07-bg.png) no-repeat left bottom;
}
.screen07 .star{
    position: absolute;
    left: 198px;
    top: 142px;
}
.screen07 .star img{
    float: left;
    margin-right: 6px;
    /* 用jquery的方式让星星一个接一个显示，因此这里可以用display: none ---方法1 */
    /* display: none; */
    /* 方法2.通过js控制星星显示动画的延迟时间 */
    /* transition: all 0.3s linear; */
    opacity: 0;  
}
.screen07 .star.show img{   
    transition: all 0.3s linear;
}
.screen07 .text{
    position: absolute;
    left: 198px;
    top: 185px;
    transform-origin: left bottom;
    opacity: 0;
    transform: scale(0);
}
.screen07 .text.show{
    animation: text07 0.5s linear 2s forwards;
}
@keyframes text07{
    0%{

    }
    70%{
        transform: scale(1.2);
        opacity: 1;
    }
    100%{
        transform: none;
        opacity: 1;
    }
}
/* 第八屏样式 */
.screen08{
    background: url(../images/08-bg.png)  left top;
}
.screen08 .btn{
    width: 398px;
    height: 160px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.screen08 .btn img:first-child{
    position: absolute;
    opacity: 1;
}
.screen08 .btn img:last-child{
    position: absolute;
    opacity: 0;
}
.screen08 .btn:hover img:last-child{
  opacity: 1;
}
.screen08 .btn:hover img:first-child{
    opacity: 0;
  }
.screen08 .again{
    position: absolute;
    right: 0;
    top: 80px;
}
.screen08 .hands{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
}

index.js

$(function () {
    // 1.设置每一页的背景颜色
    // 2.设置屏幕内容的对齐方式，默认是垂直居中--改为顶部对齐
    // 3.显示导航小圆点--指示器
    //  scrollingSpeed滚动速度，单位为毫秒 默认700
    //  监听进入某一屏的时候 回调函数afterLoad
    $(".container").fullpage({
        // 通过配置设置每一页的背景颜色
        sectionsColor:["#fadd67", "#84a2d4", "#ef674d", "#ffeedd", "#d04759", "#84d9ed", "#8ac060"],
        verticalCentered:false,
        navigation:true,
        scrollingSpeed:1000,
        afterLoad:function(link,index){
            // 监听进入某一屏的事件
            //index -序号-从1开始 当前屏的序号
            console.log(index)
            console.log(this)
            $(".section").eq(index-1).addClass("now");
        },
        onLeave:function (index,nextindex,direction) {
          //在页面滚动时的事件，direction表示方向
          let 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");
                $(".screen06 .box").addClass("show");
            }else if(index==6 && nextindex==7){
                //离开第六屏进入第七屏时
                $(".screen07 .star img").each(function(i,item){
                    // console.log(item)
                    //星星一个接着一个显示 方法1
                    // $(this).delay(i*0.5*1000).fadeIn();
                    //方法2 控制星星显示的延迟时间
                    $(this).css("transition-delay",0.5*i+"s").css("opacity","1");
                    $(".screen07 .star").addClass("show");
                    $(".screen07 .text").addClass("show");
                });
            }
        },
        afterRender:function(){
            //页面渲染完毕之后注册更多的点击事件
            // $.fn.fullpage
            $(".more").on("click",function(){
                $.fn.fullpage.moveSectionDown();
            });
            //注册购物车动画执行结束的事件
            $(".screen04 .cart").on("transitionend",function () {
                // console.log("执行结束了")
                //jQuery :last :first :visible :selected :checked ...
                $(".screen04 .address").show().find("img:last").fadeIn();
                $(".screen04 .text").addClass("show");
            })
            $(".screen08").on("mousemove",function(e){
                $(this).find(".hands").css({
                    "left":e.clientX-460,
                    "top":e.clientY-330
                })
            }).find(".again").on("click",function(){
                //清除所有的动画
                 /*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);
            })
        }
    });
});
Endless Daydream233
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5前端购物车，css3动画效果，侧滑菜单. 集合
09-20
该文件包含 h5前端购物车， css3动画效果 ，侧滑菜单 。能够快速帮助正在开发商城的同学实现购物车，侧滑菜单等功能，如果有时间的话还可以将css3动画加入到相应的页面中。
h5懒人原生模拟移动APP飞入购物车动画效果
08-21
懒人原生模拟移动APP飞入购物车动画效果,用HTML5写的源代码
HTML5学习第20篇——canvas动画综合练习
李小白的博客
12-12 589
1、目标 绘制直角坐标系内的随机折线图，折线图包含5-10个拐点。 2、代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas 练习&lt;/title&gt; &lt;style type
【H5C3练习】纯CSS实现下图所示的布局效果
qq_43303646的博客
02-21 298
【H5C3练习】纯CSS实现下图所示的布局效果 绿色色值是：#00BC9B，灰色色值是：#BCBCBC 注意HTML的语义化、内容的扩展性以及尺寸的自适应性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
（前端学习）07 使用vue框架制作购物车小球动画效果
weixin_44586318的博客
09-24 972
最近在学习前端制作了一个购物车小球的动画效果 直接上图看看效果 下面介绍一下制作这个动画的详细过程： 1.因为使用vue锁业需要使用transition标签包裹 并指定动画三个动画生命周期函数 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> ...
购物车H5前端页面，带前计算端逻辑
07-25
在构建一个具有前端计算逻辑的H5购物车页面时，我们需要关注多个关键点，这些知识点涵盖了前端开发的多个方面。以下是对这些要点的详细说明： 1. **HTML 结构**： - 页面需要包含各种元素，如商品列表、选择框...
前端 H5 消消乐小游戏demo(类似于消消乐）
08-06
【标题】"前端 H5 消消乐小游戏demo(类似于消消乐）"涉及的知识点主要涵盖以下几个方面： 1. **HTML5技术**：H5是HTML5的简称，是下一代网页标准，提供了许多新的元素和API，使得开发富媒体和交互性更强的Web应用...
购物车_微信小程序模板js代码前台前端H5页面源码.rar
最新发布
08-09
总的来说，"购物车_微信小程序模板js代码前台前端H5页面源码"是一个包含完整购物车功能实现的示例，涵盖了微信小程序的前端开发技术，尤其是JavaScript的运用，对于想要学习微信小程序开发或提升前端技能的开发者来...
H5 C3摇一摇动画打开红包抽奖特效.zip
07-11
html5 css3摇一摇动画打开红包抽奖特效</title> <link rel="stylesheet" href="css/csshake.min.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1.64"> [removed][removed] ...
H5 css3入门 基础练习特效、动画、表单
淡若清风
01-06 583
##### 2、网站（前端），java后端工程师 互联网架构（大型系统优化）、大数据（必由之路） 前端知识要直接学懂吗？不用！ 前途（职业规划） ###### 长远： 企业岗位：初级工程师，中级工程师，高级工程师，系统分析师 架构师（后端出身），技术总监 圈子： 100软件团队，前端和后端比例：5：50 测试，运维，售前，售后，营销
移动端h5 商品列表 点击加入购物车动画
12-14
移动端h5 商品列表点击，飞入页面固定位置。数据结构采用jquery，vue。
html5点击按钮商品飞入购物车动画特效
09-13
html5点击按钮商品飞入购物车动画特效
jQuery+HTML5+CSS3 实现加入购物车飞入动画特效
09-21
本案例 用到 jQuery+HTML5+CSS3 前端开发技术 实现加入购物车飞入动画特效,下载源码即可运行，运行环境VS2012。
购物车H5代码
11-09
移动端H5页面购物车实现全选，单选切换，价格结算刷新等。
H5+C3+JS制作个人博客，大牛绕道
09-25
新手开发，自己在网上仿的，有什么不足请指出，新手开发，自己在网上仿的，有什么不足请指出,新手开发，自己在网上仿的，有什么不足请指出,新手开发，自己在网上仿的，有什么不足请指出，新手开发，自己在网上仿的，有什么不足请指出，
android h5 购物车,H5前端拖拽页面开发_简单购物车
weixin_36386962的博客
05-26 143
/p><前端拖拽开发工具：购物车*{margin:0;padding:0;}li{list-style:none;float:left;width:200px;border:1px#000solid;margin:30px;}liimg{height:260px;width:200px;}p{height:20px;border-bottom:1px#333dashed;}.div1{...
H5C3和fullafullpage实现购物车动画
txw0415的博客
05-27 592
效果相关插件ea
加入购物车 动画效果
yyongsheng的博客
06-14 1295
网址 http://codepen.io/anon/pen/dXMzyB //css @import "compass/css3"; html, body{cursor: pointer;} .m-top{   padding:  15px;margin: 20px 0;   border: 1px solid #eee;border-left-width: 5px;b
Vue实现简单购物车小球动画效果
weixin_41355989的博客
05-06 976
Vue实现简单购物车小球动画效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js" type="text/javascript" charset="utf-8">...
前端基础学习笔记：从JS到Node进阶
前端基础学习笔记是一份由作者精心整理的文档，主要涵盖了JavaScript和Node.js的学习内容，旨在帮助公司的前端开发人员系统地理解和掌握这两种关键技术。以下是部分内容的详细解读： 1. JavaScript基础知识： - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值