js 翻牌活动效果

最新推荐文章于 2023-11-10 20:19:13 发布

转载最新推荐文章于 2023-11-10 20:19:13 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cczlovexw/p/8073835.html

直接上代码

html:

<div class="index_main">
    <ul class="index_card">
        <li class="one"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
        <li class="two"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
        <li class="third"><img src="{:ADDON_APP_PATH}/img/card.png" /></li>
    </ul>
</div>

界面css:

.index_main{ margin: 0 25px; padding-top: 15px;}
.index_card{ position: relative; height: 122px;}
.index_card li{ width: 30%; padding: 0 1.5%; position: absolute; top: 0;}
.index_card li img{ width: 100%; display: block;}
.index_card .one{ left: 0;}
.index_card .two{ left: 33%;}
.index_card .third{ left: 66%;}
.index_card .one.choose{ z-index: 2;
    animation: onePlay 1s linear 1;
    -webkit-animation: onePlay 1s linear 1;
    -moz-animation: onePlay 1s 0s linear 1;
}
.index_card .two.choose{ z-index: 2;
    animation: twoPlay 1s linear 1;
    -webkit-animation: twoPlay 1s linear 1;
    -moz-animation: twoPlay 1s 0s linear 1;
}
.index_card .third.choose{ z-index: 2;
    animation: thirdPlay 1s linear 1;
    -webkit-animation: thirdPlay 1s linear 1;
    -moz-animation: thirdPlay 1s 0s linear 1;
}

旋转css:(做了兼容的，可以放心使用)

/*动画*/
@keyframes onePlay{
    0%   { left: 0%; transform:scale(1) rotateY(0deg);}
    20%  { left: 6%; transform:scale(1.1) rotateY(180deg);}
    40%  { left: 12%; transform:scale(1.2) rotateY(0deg);}
    60%  { left: 18%; transform:scale(1.3) rotateY(180deg);}
    80%  { left: 24%; transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes onePlay{
    0%   { left: 0%; -webkit-transform:scale(1) rotateY(0deg);}
    20%  { left: 6%; -webkit-transform:scale(1.1) rotateY(180deg);}
    40%  { left: 12%; -webkit-transform:scale(1.2) rotateY(0deg);}
    60%  { left: 18%; -webkit-transform:scale(1.3) rotateY(180deg);}
    80%  { left: 24%; -webkit-transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes onePlay{
    0%   { left: 0%; -moz-transform:scale(1) rotateY(0deg);}
    20%  { left: 6%; -moz-transform:scale(1.1) rotateY(180deg);}
    40%  { left: 12%; -moz-transform:scale(1.2) rotateY(0deg);}
    60%  { left: 18%; -moz-transform:scale(1.3) rotateY(180deg);}
    80%  { left: 24%; -moz-transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; -moz-transform:scale(1.5) rotateY(180deg);}
}

@keyframes twoPlay{
    0%   { transform:scale(1) rotateY(0deg);}
    20%  { transform:scale(1.1) rotateY(180deg);}
    40%  { transform:scale(1.2) rotateY(0deg);}
    60%  { transform:scale(1.3) rotateY(180deg);}
    80%  { transform:scale(1.4) rotateY(0deg);}
    100% { transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes twoPlay{
    0%   { -webkit-transform:scale(1) rotateY(0deg);}
    20%  { -webkit-transform:scale(1.1) rotateY(180deg);}
    40%  { -webkit-transform:scale(1.2) rotateY(0deg);}
    60%  { -webkit-transform:scale(1.3) rotateY(180deg);}
    80%  { -webkit-transform:scale(1.4) rotateY(0deg);}
    100% { -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes twoPlay{
    0%   { -moz-transform:scale(1) rotateY(0deg);}
    20%  { -moz-transform:scale(1.1) rotateY(180deg);}
    40%  { -moz-transform:scale(1.2) rotateY(0deg);}
    60%  { -moz-transform:scale(1.3) rotateY(180deg);}
    80%  { -moz-transform:scale(1.4) rotateY(0deg);}
    100% { -moz-transform:scale(1.5) rotateY(180deg);}
}

@keyframes thirdPlay{
    0%   { left: 66%; transform:scale(1) rotateY(0deg);}
    20%  { left: 60%; transform:scale(1.1) rotateY(180deg);}
    40%  { left: 54%; transform:scale(1.2) rotateY(0deg);}
    60%  { left: 48%; transform:scale(1.3) rotateY(180deg);}
    80%  { left: 42%; transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; transform:scale(1.5) rotateY(180deg);}
}
@-webkit-keyframes thirdPlay{
    0%   { left: 66%; -webkit-transform:scale(1) rotateY(0deg);}
    20%  { left: 60%; -webkit-transform:scale(1.1) rotateY(180deg);}
    40%  { left: 54%; -webkit-transform:scale(1.2) rotateY(0deg);}
    60%  { left: 48%; -webkit-transform:scale(1.3) rotateY(180deg);}
    80%  { left: 42%; -webkit-transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; -webkit-transform:scale(1.5) rotateY(180deg);}
}
@-moz-keyframes thirdPlay{
    0%   { left: 66%; -moz-transform:scale(1) rotateY(0deg);}
    20%  { left: 60%; -moz-transform:scale(1.1) rotateY(180deg);}
    40%  { left: 54%; -moz-transform:scale(1.2) rotateY(0deg);}
    60%  { left: 48%; -moz-transform:scale(1.3) rotateY(180deg);}
    80%  { left: 42%; -moz-transform:scale(1.4) rotateY(0deg);}
    100% { left: 33%; -moz-transform:scale(1.5) rotateY(180deg);}
}

js:

这里讲原理就好了，大家自己多去思考。这里通过点击，然后在你点击的那张图片增加“choose”这个className.这样就触发了动态的样式，最后当你设置一个setTimeOut，让你的图片显示，最后把“choose”这个className从那张图片上去除掉，就可以了。

转载于:https://www.cnblogs.com/cczlovexw/p/8073835.html