美文网首页
css3卡片翻转抽奖

css3卡片翻转抽奖

作者: 奋斗的小小小兔子 | 来源:发表于2019-03-21 17:12 被阅读0次
  1. 实现思路

将两个元素放到同一个容器中,然后分别对两个元素添加旋转动画,利用css3属性backface-visibility:将元素翻转到背面时,元素不可见。

卡片正面 卡片背面,即奖品面
  1. 代码实现
<div class="container">
    <div class="front"><img src="https://img.haomeiwen.com/i6517590/8812434200d9c6d8.png" alt=""></div>
    <div class="back"><img src="https://img.haomeiwen.com/i6517590/e669ad0884c50f37.png" alt=""></div>
</div>

CSS

.container {
    position: relative;    
    width: 100px;
}

img {
    width: 100px;
}

.front, .back {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}
.front {
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(-180deg)
}

.toback {
    transform: rotateY(180deg);
}

.tofront {
    transform: rotateY(0deg);
}

.front,
.back {
    transition: all 1s;
}

JS

$(function() {
  $( ".container" ).on('click', function () {
    $( ".front" ).addClass('toback');
     $( ".back" ).addClass('tofront');
  })
});

demo地址

  1. 其他
    业务中,有4张卡片,任意抽中一个,根据后端返回的中奖结果进行展示,因此需要将已中奖元素放置到用户点击的卡片位置。
    如:
    用户点击了第四张图


    抽奖区

后端返回了以下数据,其中中奖的数据在第二个位置

[
{
  name: '一等奖',
  isLucky: false,
},
{
  name: '普通奖',
  isLucky: true,
},
{
  name: '二等奖',
  isLucky: false,
},
{
  name: '三等奖',
  isLucky: false,
},
]

这里就要让
数组元素位置互换:将中奖元素切换到点击的位置

splice对数组元素进行添加/删除,返回被删除的元素。

arr.splice(index,howmany,item1,.....,itemX)

其中index是操作数组元素的开始位置,howmany是删除元素的数目,item1,.....,itemX是添加的元素。

swapItem = (arr, fromIndex, toIndex) => {
  arr[toIndex] = arr.splice(fromIndex, 1, arr[toIndex])[0];
  return arr;
};

相关文章

网友评论

      本文标题:css3卡片翻转抽奖

      本文链接:https://www.haomeiwen.com/subject/gwlgmqtx.html