你好,游客 登录 注册 搜索
站长(煌流云)QQ:1107629738
详情页面

【京东】七夕节活动主会场 - 京东全品类专题活动-Banner效果

日期:2017-10-14

 


 

七夕节活动主会场 - 京东全品类专题活动-Banner效果 代码分享


京东原代码是在JSHOP后台(活动后台)使用,分享代码,也是在JSHOP后台(活动后台)使用,有需要者下载

<script type="text/javascript">(function(doc) {

    var FallingLeaves = function(num, id) {
            this.body = doc.body;
            this.support = false;
            this.container = id ? doc.getElementById(id) : this.body;
            this.num = num ? num : 6;
            this.init();
        };
    FallingLeaves.prototype = {
        init: function() {
            this.supportNot();
            if (this.support != false) {
                for (var i = 0; i < this.num; i++) {
                    this.container.appendChild(this.createLeaf());
                }
            }
        },
        supportNot: function() {
            var domPrefixes = 'Webkit Moz O ms a'.split(' ');
            for (var i = 0; i < domPrefixes.length; i++) {
                if (this.container.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
                    this.support = domPrefixes[i];
                    break;
                }
                if (domPrefixes[i] == "a") {
                    if (this.container.style.animationName !== undefined) {
                        this.support = domPrefixes[i];
                        break;
                    }
                }
            }
        },
        randomInteger: function(low, high) {
            return low + Math.floor(Math.random() * (high - low));
        },
        randomFloat: function(low, high) {
            return low + Math.random() * (high - low);
        },
        pixelValue: function(value) {
            return value + 'px';
        },
        durationValue: function(value) {
            return value + 's';
        },
        createLeaf: function() {
            var self = this,
                leafDiv = doc.createElement('div'),
                image = doc.createElement('img'),
                spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip',
                fadeAndDropDuration = self.durationValue(self.randomFloat(5, 11)),
                spinDuration = self.durationValue(self.randomFloat(4, 8)),
                leafDelay = self.durationValue(self.randomFloat(0, 20));
                var imgData=['HTTP://img12.360buyimg.com/cms/jfs/t1552/92/1325833504/9357/4b7e17d0/55c446e7N9ce38454.png',
'HTTP://img13.360buyimg.com/cms/jfs/t1516/165/1333317250/15905/76a82579/55c446e7Nc70e35ca.png',
'HTTP://img13.360buyimg.com/cms/jfs/t1597/170/1306873474/21425/a3fbc5f2/55c446e6Na6af9f55.png',
'HTTP://img12.360buyimg.com/cms/jfs/t1387/1/1284343935/3695/bc9764f6/55c447e8Nbb9cd670.png',
'HTTP://img14.360buyimg.com/cms/jfs/t1420/63/1324304116/5146/907f82f7/55c447e7N1b6984b3.png',
'HTTP://img13.360buyimg.com/cms/jfs/t1675/39/1112933701/6476/5a560017/55c447e7N2e438c3a.png',
'HTTP://img12.360buyimg.com/cms/jfs/t1912/210/1868412586/17082/989473e0/56e11da6N8cbea016.png',
'HTTP://img11.360buyimg.com/cms/jfs/t2020/203/2661103534/18625/eb2f5c52/56e11da6Na13f4577.png',
'HTTP://img12.360buyimg.com/cms/jfs/t2041/137/2526387191/32637/4452e1c1/56e11da6N0492bd30.png',
'HTTP://img11.360buyimg.com/cms/jfs/t2752/216/3760626274/5920/580169e8/5799ae0bN49fd6e7c.png',
'HTTP://img30.360buyimg.com/cms/jfs/t2821/206/3828169287/5143/e3e5c8f9/5799ae0bNdaf13793.png',
'HTTP://img20.360buyimg.com/cms/jfs/t2668/319/3756677006/3557/939cc26b/5799ae0bNf865e56c.png',
'HTTP://img11.360buyimg.com/cms/jfs/t2989/86/2041627031/8282/ba79e392/5799ae0bN93eb348d.png'
]
            leafDiv.className = "leave";
            //console.log(self.randomInteger(0, 3));
            image.src = imgData[self.randomInteger(0, 11)];
            leafDiv.style.top = self.pixelValue(self.randomInteger(0, 300));
            leafDiv.style.zIndex = self.randomInteger(0, 3);
            leafDiv.style.opacity=0;
                    // leafDiv.style.position="fix"+"ed";
            leafDiv.style.left= self.pixelValue(self.randomInteger(-100, self.container.clientWidth*1/3));
            if (self.container.style[self.support + 'AnimationName'] !== undefined) {
                image.style[self.support + 'AnimationName'] = spinAnimationName;
                image.style[self.support + 'AnimationDuration'] = spinDuration;
                leafDiv.style[self.support + 'AnimationName'] = 'fade, drop';
                leafDiv.style[self.support + 'AnimationDelay'] = leafDelay + ', ' + leafDelay;
                leafDiv.style[self.support + 'AnimationDuration'] = fadeAndDropDuration + ', ' + fadeAndDropDuration
            }
            if (this.support == "a") {
                image.style.animationName = spinAnimationName;
                image.style.animationDuration = spinDuration;
                leafDiv.style.animationName = 'fade, drop';
                leafDiv.style.animationDelay = leafDelay + ', ' + leafDelay;
                leafDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration
            }
            leafDiv.appendChild(image);
            return leafDiv;
        }
    };
    new FallingLeaves(12,"topImg");
 
})(document);</script>
<style>.leave {
    position: absolute;
    -webkit-animation-iteration-count: infinite,infinite;
    -webkit-animation-direction: normal,normal;
    -webkit-animation-timing-function: linear,ease-in;
    -moz-animation-iteration-count: infinite,infinite;
    -moz-animation-direction: normal,normal;
    -moz-animation-timing-function: linear,ease-in;
    -o-animation-iteration-count: infinite,infinite;
    -o-animation-direction: normal,normal;
    -o-animation-timing-function: linear,ease-in;
    animation-iteration-count: infinite,infinite;
    animation-direction: normal,normal;
    animation-timing-function: linear,ease-in;
}
 
.leave>img {
     
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-transform-origin: 50% -100%;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in-out;
    -moz-transform-origin: 50% -100%;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
    -o-animation-timing-function: ease-in-out;
    -o-transform-origin: 50% -100%;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    transform-origin: 50% -100%;
}
 
@-webkit-keyframes fade {
    0% {
        opacity:0
    }
    20% {
        opacity: 1
    }
    95% {
        opacity: 1
    }
 
    100% {
        opacity: 0
    }
}
 
@-webkit-keyframes drop {
    0% {
        -webkit-transform: translate(0px,0px)
    }
 
    100% {
        -webkit-transform: translate(1600px,500px)
    }
}
 
@-webkit-keyframes clockwiseSpin {
    0% {
        -webkit-transform: rotate(-100deg)
    }
 
    100% {
        -webkit-transform: rotate(100deg)
    }
}
 
@-webkit-keyframes counterclockwiseSpinAndFlip {
    0% {
        -webkit-transform: scale(-1,1) rotate(100deg)
    }
 
    100% {
        -webkit-transform: scale(-1,1) rotate(-100deg)
    }
}
 
@-moz-keyframes fade {
    0% {
        opacity: 1
    }
 
    95% {
        opacity: 1
    }
 
    100% {
        opacity: 0
    }
}
 
@-moz-keyframes drop {
    0% {
        -moz-transform: translate(0,0)
    }
 
    100% {
        -moz-transform: translate(1600px,500px)
    }
}
 
@-moz-keyframes clockwiseSpin {
    0% {
        -moz-transform: rotate(-100deg)
    }
 
    100% {
        -moz-transform: rotate(100deg)
    }
}
 
@-moz-keyframes counterclockwiseSpinAndFlip {
    0% {
        -moz-transform: scale(-1,1) rotate(100deg)
    }
 
    100% {
        -moz-transform: scale(-1,1) rotate(-100deg)
    }
}
 
@-o-keyframes fade {
    20% {
        opacity: 1
    }
 
    95% {
        opacity: 1
    }
 
    100% {
        opacity: 0
    }
}
 
@-o-keyframes drop {
    0% {
        -o-transform: translate(0,0)
    }
 
    100% {
        -o-transform: translate(1600px,500px)
    }
}
 
@-o-keyframes clockwiseSpin {
    0% {
        -o-transform: rotate(-100deg)
    }
 
    100% {
        -o-transform: rotate(100deg)
    }
}
 
@-o-keyframes counterclockwiseSpinAndFlip {
    0% {
        -o-transform: scale(-1,1) rotate(100deg)
    }
 
    100% {
        -o-transform: scale(-1,1) rotate(-100deg)
    }
}
 
@keyframes fade {
    20% {
        opacity: 1
    }
 
    95% {
        opacity: 1
    }
 
    100% {
        opacity: 0
    }
}
 
@keyframes drop {
    0% {
        transform: translate(0,0)
    }
 
    100% {
        transform: translate(1600px,500px)
    }
}
 
@keyframes clockwiseSpin {
    0% {
        transform: rotate(-100deg)
    }
 
    100% {
        transform: rotate(100deg)
    }
}
 
@keyframes counterclockwiseSpinAndFlip {
    0% {
        transform: scale(-1,1) rotate(100deg)
    }
 
    100% {
        transform: scale(-1,1) rotate(-100deg)
    }
 
}
 
.yh-top {    background: #ffd3ee url(//img14.360buyimg.com/cms/jfs/t2665/270/3692695207/81130/a36f5f0d/579829f0Nd016901d.jpg) center top no-repeat;
    width: 100%;
    height: 568px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.yh-top-stage {
    width: 990px;
    height: 568px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -495px;
}
.yh-top-stage p {
    width: 495px;
    height: 568px;
    position: absolute;
    top: 0;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.yh-top-stage p.p-l {
    left: 0;
    transform-origin: right center;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
}
.yh-top-stage p.p-r {
    right: 0;
    transform-origin: left center;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
}
.yh-top-stage p.p1 {
    background-image: url(//img10.360buyimg.com/cms/jfs/t2875/172/3670480890/208723/a591e85a/5799814aN682621ac.png);
    z-index: 2;
}
.yh-top-stage p.p2 {
    background-image: url(//img20.360buyimg.com/cms/jfs/t2815/180/3757780057/196271/6af044f0/5799814aN353c932b.png);
    -moz-animation: .5s spin linear forwards;
    z-index: 2;
}
.yh-top-stage p.p3 {
    background-image: url(//img13.360buyimg.com/cms/jfs/t2758/28/3761378397/251453/726a49c6/5799814aNb0313aa5.png);
    -moz-animation: .8s scale linear forwards;
    -webkit-animation: .8s scale linear forwards;
    animation: .8s scale linear forwards;
    z-index: 1;
}
.yh-top-stage p.p4 {
    background-image: url(//img13.360buyimg.com/cms/jfs/t2782/191/3706447381/241484/4e611e06/5799814aN7cca3c41.png);
    -moz-animation: .8s scale linear forwards;
    -webkit-animation: .8s scale linear forwards;
    animation: .8s scale linear forwards;
    z-index: 1;
}
.yh-top-stage p.p1.spin {
    -moz-animation: .5s spin linear forwards;
    -webkit-animation: .5s spin linear forwards;
    animation: .5s spin linear forwards;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}
.yh-top-stage p.p2.spin {
    -moz-animation: .5s spin linear forwards;
    -webkit-animation: .5s spin linear forwards;
    animation: .5s spin linear forwards;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
.yh-top-stage p.p1.swing {
    -moz-animation: 3s swing-1 infinite;
    -webkit-animation: 3s swing-1 infinite;
    -moz-animation: 3s swing-1 infinite;
    animation: 3s swing-spin infinite;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.yh-top-stage p.p2.swing {
    -moz-animation: 3s swing-2 infinite;
    -webkit-animation: 3s swing-2 infinite;
    animation: 3s swing-2 infinite;
    -webkit-transform: rotateY(-0deg);
    -moz-transform: rotateY(-0deg);
    transform: rotateY(-0deg);
}
 @keyframes scale {
0% {
transform:scale(0, 0);
}
100% {
transform:scale(1, 1);
}
}
@-webkit-keyframes scale {
0% {
-webkit-transform:scale(0, 0);
transform:scale(0, 0);
}
100% {
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
}
@-moz-keyframes scale {
0% {
-moz-transform:scale(0, 0);
}
100% {
-moz-transform:scale(1, 1);
}
}
 @keyframes swing-1 {
 50% {
transform:rotateY(50deg);
}
}
@-webkit-keyframes swing-1 {
 50% {
-webkit-transform:rotateY(50deg);
transform:rotateY(50deg);
}
}
@-moz-keyframes swing-1 {
 50% {
-moz-transform:rotateY(50deg);
}
}
@keyframes swing-2 {
 50% {
transform:rotateY(-50deg);
}
}
@-webkit-keyframes swing-2 {
 50% {
-webkit-transform:rotateY(-50deg);
transform:rotateY(-50deg);
}
}
@-moz-keyframes swing-2 {
 50% {
-moz-transform:rotateY(-50deg);
}
}
 @keyframes spin {
 100% {
transform:rotateY(0deg);
}
}
@-webkit-keyframes spin {
 100% {
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
}
@-moz-keyframes spin {
 100% {
-moz-transform:rotateY(0deg);
}
}
.floor-red, .floor-blue {
    width: 994px;
    margin-right: -8px;
    position: relative;
    zoom: 1;
    padding-top: 20px;
    overflow: hidden
}
.floor-red a, .floor-blue a {
    float: left;
    display: block;
    width: 134px;
    height: 36px;
    padding-bottom: 20px;
    margin-right: 8px;
    background-position: center top;
    background-repeat: no-repeat;
    font-size: 20px;
    text-align: center;
    line-height: 36px;
}
.floor-blue {
    width: 996px;
}
.floor-blue a {
    width: 158px;
}
.floor-red a.current, .floor-blue a.current, .floor-red a:hover, .floor-blue a:hover {
    color: #fff;
}
.floor-red a {
    background-image: url(//img13.360buyimg.com/cms/jfs/t2800/169/3757112168/1861/7e28b331/579857a2N2b891207.png);
    color: #ff00c0;
}
.floor-blue a {
    background-image: url(//img14.360buyimg.com/cms/jfs/t2713/19/3747514510/1868/a79498d3/5799cfe1Na815c4a7.png);
    color: #5336e6;
}
.floor-red a.current, .floor-red a:hover {
    background-image: url(//img20.360buyimg.com/cms/jfs/t2659/53/3704557864/1789/c9f786bd/579857a2Nd235466f.png);
}
.floor-blue a.current, .floor-blue a:hover {
    background-image: url(//img11.360buyimg.com/cms/jfs/t3004/10/300255234/1759/d9cd3b0b/5799cfe1N9f978edb.png);
}
.floor-love {
    width: 999px;
    margin-right: -9px;
    position: relative;
    zoom: 1;
    padding-top: 20px;
    overflow: hidden
}
.floor-love a {
    float: left;
    display: block;
    width: 324px;
    height: 36px;
    padding-bottom: 20px;
    margin-right: 9px;
    background-position: center top;
    background-repeat: no-repeat;
    font-size: 20px;
    text-align: center;
    line-height: 36px;
    background-image: url(//img10.360buyimg.com/cms/jfs/t2755/141/3799124585/1902/1cc7a9af/57986efeN31ffcc91.png);
    color: #e12428;
}
.floor-love a.current, .floor-love a:hover {
    background-image: url(//img12.360buyimg.com/cms/jfs/t2752/223/3712338278/1884/39797dac/57986efeN28948ad3.png);
    color: #fff;
}
ul.yh-goods-rb {
    width: 1000px;
    margin-right: -10px;
    _position: relative;
    zoom: 1;
    font-family: "微软雅黑";
    text-align: center;
}
ul.yh-goods-rb li {
    float: left;
    width: 190px;
    height: 284px;
    margin: 0px 10px 10px 0;
    overflow: hidden;
    background: #fff;
    position: relative;
}
ul.yh-goods-rb li .yh-img {
    margin: 0 auto;
    display: block;
    overflow: hidden;
    padding-bottom: 5px;
}
ul.yh-goods-rb li .yh-img img {
    vertical-align: top;
    width: 190px;
    height: 190px;
}
ul.yh-goods-rb li .yh-price {
    overflow: hidden;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-align: left;
    padding: 0 10px;
}
ul.yh-goods-rb li .yh-price span {
    font-size: 16px;
    font-family: Arial;
    font-weight: bold;
}
ul.yh-goods-rb li p.yh-desc {
    text-align: left;
    overflow: hidden;
    height: 36px;
    line-height: 18px;
    padding: 0 10px;
    font-family: "宋体";
}
ul.yh-goods-rb li p.yh-desc a {
    color: #353535;
    font-size: 12px;
}
ul.yh-goods-rb li .yh-btn {
    margin: 5px auto 0 auto;
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
}
ul.yh-goods-rb.red li .yh-btn {
    background: #e12428;
}
ul.yh-goods-rb.red li .yh-price, ul.yh-goods-rb.red li .yh-price span {
    color: #e12428;
}
ul.yh-goods-rb.blue li .yh-btn {
    background: #5336e6;
}
ul.yh-goods-rb.blue li .yh-price, ul.yh-goods-rb.blue li .yh-price span {
    color: #5336e6;
}
ul.yh-goods-rb.purple li .yh-btn {
    background: #ff00c0;
}
ul.yh-goods-rb.purple li .yh-price, ul.yh-goods-rb.purple li .yh-price span {
    color: #ff00c0;
}
a.qrj-nav {
    position: relative;
    width: 240px;
    height: 240px;
    display: block
}
a.qrj-nav img {
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    position: absolute;
    width: 240px;
    height: 240px;
    left: 50%;
    top: 50%;
    margin-left: -120px;
    margin-top: -120px;
}
a.qrj-nav:hover img {
    width: 260px;
    height: 260px;
    margin-left: -130px;
    margin-top: -130px;
}
a.qrj-nav span {
    position: absolute;
    width: 240px;
    height: 60px;
    background-color: rgba(0,0,0,0.5);
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    left: 0;
    bottom: -20px;
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
a.qrj-nav span em {
    width: 100px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: #ffff00;
    color: #000;
    margin: 0 auto;
    margin-top: 20px;
    display: block;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background-image: url(//img14.360buyimg.com/cms/jfs/t2716/146/3691798352/1206/344504a3/57987192N79333821.png);
    background-position: 10px center;
    background-repeat: no-repeat
}
a.qrj-nav:hover span {
    left: 0;
    bottom: 0px;
    filter: alpha(opacity=100);
    opacity: 1;
}
</style>
 
<div class="j-module" module-function="autoCenter,rid" module-param="{}">
    <div class="userDefinedArea" style="width: 1920px; margin-left: -39.5px;">
        <div class="yh-top" id="topImg" style="
    /* display: none; */
">
 <div class="yh-top-stage">
  <p class="p-l p3"></p>
  <p class="p-r p4"></p>
  <p class="p-l p1 swing"></p>
  <p class="p-r p2 swing"></p>
 </div>
<div class="leave" style="top: 109px; z-index: 1; opacity: 0; left: 382px; animation-name: fade, drop; animation-delay: 4.98699s, 4.98699s; animation-duration: 8.56386s, 8.56386s;"><img src="HTTP://img12.360buyimg.com/cms/jfs/t2041/137/2526387191/32637/4452e1c1/56e11da6N0492bd30.png" style="animation-name: clockwiseSpin; animation-duration: 5.20316s;"></div><div class="leave" style="top: 240px; z-index: 1; opacity: 0; left: 367px; animation-name: fade, drop; animation-delay: 8.77462s, 8.77462s; animation-duration: 8.05157s, 8.05157s;"><img src="HTTP://img13.360buyimg.com/cms/jfs/t1516/165/1333317250/15905/76a82579/55c446e7Nc70e35ca.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 4.64413s;"></div><div class="leave" style="top: 166px; z-index: 0; opacity: 0; left: 264px; animation-name: fade, drop; animation-delay: 3.58666s, 3.58666s; animation-duration: 9.3436s, 9.3436s;"><img src="HTTP://img12.360buyimg.com/cms/jfs/t1387/1/1284343935/3695/bc9764f6/55c447e8Nbb9cd670.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 6.3317s;"></div><div class="leave" style="top: 288px; z-index: 0; opacity: 0; left: 512px; animation-name: fade, drop; animation-delay: 4.93648s, 4.93648s; animation-duration: 6.41364s, 6.41364s;"><img src="HTTP://img13.360buyimg.com/cms/jfs/t1597/170/1306873474/21425/a3fbc5f2/55c446e6Na6af9f55.png" style="animation-name: clockwiseSpin; animation-duration: 7.51688s;"></div><div class="leave" style="top: 57px; z-index: 1; opacity: 0; left: -74px; animation-name: fade, drop; animation-delay: 0.611269s, 0.611269s; animation-duration: 9.88173s, 9.88173s;"><img src="HTTP://img13.360buyimg.com/cms/jfs/t1597/170/1306873474/21425/a3fbc5f2/55c446e6Na6af9f55.png" style="animation-name: clockwiseSpin; animation-duration: 5.91148s;"></div><div class="leave" style="top: 60px; z-index: 1; opacity: 0; left: 395px; animation-name: fade, drop; animation-delay: 19.817s, 19.817s; animation-duration: 9.87475s, 9.87475s;"><img src="HTTP://img13.360buyimg.com/cms/jfs/t1516/165/1333317250/15905/76a82579/55c446e7Nc70e35ca.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 6.93022s;"></div><div class="leave" style="top: 13px; z-index: 1; opacity: 0; left: 568px; animation-name: fade, drop; animation-delay: 3.73797s, 3.73797s; animation-duration: 5.45131s, 5.45131s;"><img src="HTTP://img11.360buyimg.com/cms/jfs/t2020/203/2661103534/18625/eb2f5c52/56e11da6Na13f4577.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 5.06121s;"></div><div class="leave" style="top: 8px; z-index: 0; opacity: 0; left: 611px; animation-name: fade, drop; animation-delay: 9.37703s, 9.37703s; animation-duration: 9.40544s, 9.40544s;"><img src="HTTP://img12.360buyimg.com/cms/jfs/t1387/1/1284343935/3695/bc9764f6/55c447e8Nbb9cd670.png" style="animation-name: clockwiseSpin; animation-duration: 5.29836s;"></div><div class="leave" style="top: 244px; z-index: 0; opacity: 0; left: 318px; animation-name: fade, drop; animation-delay: 9.30629s, 9.30629s; animation-duration: 6.06914s, 6.06914s;"><img src="HTTP://img12.360buyimg.com/cms/jfs/t1912/210/1868412586/17082/989473e0/56e11da6N8cbea016.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 6.67966s;"></div><div class="leave" style="top: 277px; z-index: 0; opacity: 0; left: 579px; animation-name: fade, drop; animation-delay: 2.79218s, 2.79218s; animation-duration: 5.01439s, 5.01439s;"><img src="HTTP://img13.360buyimg.com/cms/jfs/t1516/165/1333317250/15905/76a82579/55c446e7Nc70e35ca.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 5.79683s;"></div><div class="leave" style="top: 204px; z-index: 2; opacity: 0; left: 245px; animation-name: fade, drop; animation-delay: 16.8896s, 16.8896s; animation-duration: 9.82784s, 9.82784s;"><img src="HTTP://img11.360buyimg.com/cms/jfs/t2752/216/3760626274/5920/580169e8/5799ae0bN49fd6e7c.png" style="animation-name: counterclockwiseSpinAndFlip; animation-duration: 6.30164s;"></div><div class="leave" style="top: 257px; z-index: 0; opacity: 0; left: 115px; animation-name: fade, drop; animation-delay: 4.42731s, 4.42731s; animation-duration: 9.5329s, 9.5329s;"><img src="HTTP://img13.360buyimg.com/cms/jfs/t1597/170/1306873474/21425/a3fbc5f2/55c446e6Na6af9f55.png" style="animation-name: clockwiseSpin; animation-duration: 5.49396s;"></div></div>
    </div>
</div>

本文地址:/n736c47.aspx,转载请注明出处。

快来喂养你的小仓鼠:左键点击喂食互动↓

 

0 | | 煌流云 |
本文评论
姓名:
字数
    内容分类
    PS教学