js——小动画

最新推荐文章于 2024-08-31 23:42:40 发布

Knight__D

最新推荐文章于 2024-08-31 23:42:40 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/dihuiqin/article/details/52557000

版权

最近写了个小动画练练手，这是我制作的一个小动画(待改进) mark

source:

html:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="default/index.css">
</head>
<body>
    <div id="content">
        <div id="card1">
            <div id="top">
                <img src="112.png" alt="">
            </div>
            <div id="bottom">
                <div id="card1L">
                    <p class="card1T1">Gift Card</p>
                    <p class="card1T2">$25.00</p>
                </div>
                <div id="card1R">
                    <div id="bottom1">
                        <span id="buy">Buy</span>
                        <p id="but">
                            <span id="btop"></span>
                            <span id="bbottom"></span>
                            <span id="left"></span>
                            <span id="right"></span>
                            <img id="yellow" src="yellow.png">
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="card2">
            <div id="top2">
                <p class="title1">YOUR ORDER WILL BE SHIPPED TO:</p>
                <p class="title2">Nick Chuan</p>
                <p id="title3"  class="title3">255 king St, Apt 338</p>
                <p id="title4" class="title4">San Francisco.CA 94107</p>
                <p id="title5" class="title5">Available to ship:1 business day</p>
            </div>
            <div id="bottom2">
                <input id="text" type="text" value="Enter a gift message">
                <p id="but2">Checkout</p>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="default/index.js"></script>
</html>

css:

body,div{ box-sizing: border-box; }
#content{  width: 300px;  height: 200px;  border:solid #ccc 1px;  box-shadow: 3px 3px 2px #eee;  border-radius: 10px;  position: absolute; top: 0;left: 0;right: 0;bottom: 0; margin: auto;  overflow:hidden;  }
#card1,#card2{ width: 100%; height: 100%;  position: relative; }
#card1{ z-index: 1; }
#top{  width: 300px;  height: 130px;position:absolute; bottom:70px; overflow: hidden;  }
#bottom{  width: 300px;  height: auto; overflow:hidden; position:absolute; top: 130px;left:0;}
#top img{width: 100%; height: auto;}
#card1L, #card1R{ width: 150px; height: 70px;  padding: 5px 20px; overflow: hidden;}
#card1L{  float: left; z-index: 1;}
.card1T1{ color: deeppink; font: bold 18px/7px Arial;}
.card1T2{ color: #777; font: 17px/0 Arial;}
#buy{  font: 20px/38px Arial; color: #fff; display: block; text-align: center; cursor: pointer; z-index: 1; }
.title1{ font: bold 14px/25px Arial;}
.title2{ font: bold 13px/9px Arial;}
.title3,.title4{ font: 10px/9px Arial; color: #aaa; position: absolute; }
.title3{  left: 30px;top:50px;}
.title4{  left: 50px; top:70px;}
.title5{ width: 260px; font: 10px/15px Arial; color: #aaa; padding-bottom: 5px; border-bottom: solid 1px #ccc; position: absolute; left: 70px; top:90px;}
#bottom1{  width: 300px;  height: 70px;  position: absolute; }
#but,#buy{  width: 70px;  height: 40px;  border-radius: 5px;  position: absolute;  left: 25px;  top: 10px;  margin:0;  overflow: hidden;  }
#but{  background: #ef9a00;  }
/*此处开始为丝带动画*/
#btop{  width:6px;  height:20px;  background:#ff0;  position:absolute;  left:18px;  top:-20px;  display:block;   }
#bbottom{  width:6px;  height:30px;  background:#ff0;  position:absolute;  left:18px;  top:40px; display:block;}
#left{  width: 1px;  height: 6px;  background: #ff0;  position: absolute;  left: -1px;  top: 12px;  display: block;}
#right{  width: 50px;  height: 6px;  background: #ff0;  position: absolute;  left: 70px;  top: 12px;  display: block;}
#yellow{  width:0;  height:0;  position:absolute;  top:15px;  left:17px;  display:block; }
/*单击按钮时调用这个类，执行时间为1s之后里面的黄条会延迟1s在加载*/

.opacity{ opacity: 0; -moz-opacity:0;}
.opacity1{ opacity: 1; -moz-opacity:1;}
.once{
   animation: one 1s 1;
   -moz-animation: one 1s 1;
   -webkit-animation: one 1s 1;

}
@-webkit-keyframes one{ 30%{  transform:scale(0.7); } 100%{  transform:scale(1);  } }
@-moz-keyframes one{ 30%{  transform:scale(0.7); } 100%{  transform:scale(1);  } }
@keyframes one{ 30%{  transform:scale(0.7); } 100%{  transform:scale(1);  } }

#card2{ padding: 0 20px; top:-200px; left: 70px;  opacity: 0;}
#top2{  width: 260px;  height: 130px; border-top-left-radius:19px;  border-top-right-radius:19px;  }
#bottom2{ width: 300px;  height: 70px; padding-top: 10px; position: absolute; top:122px; }
#bottom2 img{ width: 60px; height: 40px; float: left;}
#text{  width:125px;  height:38px; margin: 0 10px 0 70px;padding: 0;border:1px solid #ccc;  border-radius:5px;  color:#ddd;  float: left; }
#but2{  width:60px;  height:40px;  border-radius:5px;  margin:0; background:#51a5f3; color: #fff; float: left; font:10px/40px Arial; display: inline-block; text-align: center; cursor: pointer; }

/* 动画效果   */
/* 礼盒 1.3s   [持续 缓冲 延迟]*/
.transitionGift{  -webkit-transition:all .3s linear 1s;  -moz-transition:all .3s linear 1s;transition:all .3s linear 1s; }
/* 缩放  1.5s */
.transitionTab{  transition: all .3s linear 1.3s;  -webkit-transition: all .3s linear 1.3s;  -moz-transition: all .3s linear 1.3s;}
.transitionTab2{  transition: all .4s linear 1.3s;  -webkit-transition: all .4s linear 1.3s;  -moz-transition: all .4s linear 1.3s;}
.transitionTab3{  transition: all .6s ease-in 1.3s;  -webkit-transition: all .6s ease-in 1.3s;  -moz-transition: all .6s ease-in 1.3s;}
.transitionTab4{  transition: all .8s ease-in-out 1.3s;  -webkit-transition: all .8s ease-in-out 1.3s;  -moz-transition: all .8s ease-in-out 1.3s;}
/* 切换 1.8s   */
.transitionChange{   transition: all .3s linear 1.3s;  -webkit-transition: all .3s linear 1.3s;  -moz-transition: all .3s linear 1.3s; }
.transitionChange{   transition: all .3s linear 1.3s;  -webkit-transition: all .3s linear 1.3s;  -moz-transition: all .3s linear 1.3s; }
/*反转180*/
.transform180{   transform: rotateX(360deg);-webkit-transform: rotateX(360deg);  -moz-transform: rotateX(360deg); }
.flipper {  transition:all 1s linear 1s;  transform-style: preserve-3d;  }
/*礼物还原*/
.gifrHidden{  transition: all .1s linear 1.3s;  -webkit-transition: all .1s linear 1.3s;  -moz-transition: all .1s linear 1.3s;}

JS:

// JavaScript Document


/*  点击事件1   */
var butb=document.getElementById("buy");
butb.οnclick=function(){
    click1();   /*点击效果*/
    gift();     /*礼物拼合*/

    move();     /*向下 向右移动*/

    coming();   /*卡片第二面淡入效果*/

    zindex(0,1);   /*改变拉片1，2的层叠关系*/

    animDel('but2','once'); /*删除按钮的动画*/
};
/*  点击事件2   */
var butb2=document.getElementById("but2");
butb2.οnclick=function() {
    click2();   /*点击效果*/
    //flipper();  /*翻转效果*/

    cardDef();  /*显示卡片1*/

    zindex(1,0);   /*改变拉片1，2的层叠关系*/

    giftDef();      /*还原buy按钮 还原礼物初始状态*/
    animDel('buy','once'); /*删除按钮的动画*/
    animDel('but','once'); /*删除按钮的动画*/

};
/* 点击效果1 */
function click1(){
    buy.className=" once opacity transitionGift";
    document.getElementById("buy").style.visibility='hidden';
    but.className="once transitionGift";
    var but = document.getElementById("but")
    but.style.backgroundColor="#f00";
}
/*礼盒动画*/
function gift(){
    childNodes(but,'transitionGift');
    change('left','w','20px');
    change('right','l','20px');
    change('btop','t','-5px');
    change('bbottom','t','15px');
    document.getElementById("yellow").setAttribute("style","width:35px; height:25px; top:3px; left:5px;");
}
/*向下 向右移动*/
function move(){
    document.getElementById('top').style.height = 0;
    childNodes(card1,'transitionTab');
    change('bottom','l','-180px');
}
/*卡片第二面淡入效果*/
function coming(){
    childNodes(bottom,'transitionTab');
    childNodes(content,'transitionTab');
    childNodes(card2,'transitionTab');
    addClass('title3','transitionTab2');
    addClass('title4','transitionTab3');
    addClass('title5','transitionTab4');

    /*位置初始化*/
    change('card2','l','0');
    change('title3','l','20px');
    change('title4','l','20px');
    change('title5','l','20px');

    /*改变卡片2的透明度*/
    opacityChange('card2');
}
/*改变拉片1，2的层叠关系*/
function zindex(num1,num2){
    card1 = document.getElementById('card1');
    card2 = document.getElementById('card2');
    card1.style.zIndex = num1;
    card2.style.zIndex = num2;

    card2.style.opacity = num2;
}
/*移除动画效果*/
function animDel(name,cName){
    temp = document.getElementById(name);
    temp.className = temp.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );
}

/* 点击效果2 */
function click2(){
    but2.className = " once ";
}
/* 翻转效果 */
function flipper(){
    addClass('card1', 'transform180');
    addClass('card1', 'flipper');
}
/* 显示卡片1 */
function cardDef(){
    document.getElementById('top').style.height = '130px';
    change('bottom','l', '0');
}
/* 还原buy按钮 还原礼物初始状态 */
function giftDef(){
    temp = document.getElementById("buy");
    temp2 = document.getElementById("but");
    temp.style.visibility='visible';
    addClass('buy', 'opacity1');
    temp2.style.backgroundColor= '#ef9a00';

    /*还原礼物状态*/
    change('left','w','1px');
    change('right','l','70px');
    change('btop','t','-20px');
    change('bbottom','t','40px');
    document.getElementById("yellow").setAttribute("style","width:0; height:0; top:15px; left:17px;");
    childNodes(but,' ');
    childNodes(but,'gifrHidden');
}


/*改变元素属性*/
function change(name,attr,value){
    id = document.getElementById(name);
   if(attr=='w'){
       id.style.width=value;
    }
    else if(attr=='l'){
        id.style.left = value;
    }
    else if(attr=='t'){
        id.style.top = value;
    }
}

/*获取子元素 并添加指定class*/
function childNodes(name,action){
    this.temp = name.childNodes;        //将ID为name的子元素赋值给temp
    for(i=1; i<temp.length;i++){        //依次给子元素添加样式
        temp[i].className = action;
    }
}
/*  添加指定class   */
function addClass(name,style){
    this.temp = document.getElementById(name);
    temp.className +=" " +style;
}
/* 改变z-index的值 */
function opacityChange(name){
    temp = document.getElementById(name).style.opacity;
    //alert(temp);
    if(temp){
        document.getElementById(name).className +=" " +"opacity";
    }
    else
        document.getElementById(name).className +=" " +"opacity1";
}