一个用于抽奖的翻牌demo，从react改版成原生代码，有兴趣的小伙伴可以参考参考， 直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.card-wrapper{
width: 640px;
height: 350px;
position: absolute;
top: 70px;
left: calc( 50% - 320px);
padding: 10px 15px 0;
}
.card-list{
width: 100%;
height: 242px;
perspective:1000;
perspective-origin: center center;
-webkit-perspective:1000; /* Safari 和 Chrome */
-webkit-perspective-origin: center center; /* Safari 和 Chrome */
transform-style: preserve-3d;
position: relative;
}
.card-list-item{
width: 192px;
height: 242px;
transform-style: preserve-3d;
overflow: hidden;
}
.card-list-item-wrapper{
width: 100%;
height: 100%;
position: relative;
}
.card-list-item-back,.card-list-item-front{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card-list-item-back{
background-image: url('./cardBack.png');
transform: rotateY(0deg);
transition: all .8s cubic-bezier(0.68,-.55,.265,1.55);
overflow: hidden;
position: relative;
}
.card-list-item-back-text{
width: 132px;
height: 38px;
background: #C92400;
opacity: 0.65;
border-radius: 19px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 162px;
left: 30px;
font-size: 24px;
font-weight: 400;
color: #FFE6DF;
}
.card-list-item-front{
background-image: url('./cardFront.png');
font-size: 36px;
font-weight: 600;
color: #B82B0B;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transform: rotateY(180deg);
transition: all .8s cubic-bezier(0.68,-.55,.265,1.55);
overflow: hidden;
}
.card-list-item-back.choosed{
transform: rotateY(180deg);
}
.card-list-item-front.choosed{
transform: rotateY(0deg);
}
.card1{
position: absolute;
top: 4px;
left: 0;
}
.card2{
position: absolute;
top: 4px;;
left: 205px;
}
.card3{
position: absolute;
top: 4px;
left: 410px;
}
.move1{
animation:move1 1s ease-in-out 3;
}
.move2{
animation:move2 1s ease-in-out 3;
}
.move3{
animation:move3 1s ease-in-out 3;
}
@keyframes move1{
0% {left:0px; top: 4px;z-index: 9;transform: scale(1);}
50% {left:253px; top: 2px;z-index: 99;transform: scale(1.04);}
100% {left:0px; top: 4px;z-index: 9;transform: scale(1);}
}
@keyframes move2{
0% {left:205px;top: 4px;z-index: 9;transform: scale(1);}
25% {left:230px;top: 6px;z-index: 5;transform: scale(1.03);}
50% {left:205px;top: 4px;z-index: 9;transform: scale(1.03);}
75% {left:180px;top: 6px;z-index: 5;transform: scale(1.03);}
100% {left:205px;top: 4px;z-index: 9;transform: scale(1);}
}
@keyframes move3{
0% {left:410px;top: 4px;z-index: 9;z-index: 9;transform: scale(1);}
50% {left:157px;top: 2px;z-index: 99;z-index: 999;transform: scale(1.04);}
100% {left:410px;top: 4px;z-index: 9;z-index: 9;transform: scale(1);}
}
@keyframes lighter {
0% {font-size: 24px;font-weight: 400;color: #FFE6DF;}
50% {font-size: 25px;font-weight: 500;color: #fcfaf9;}
100% {font-size: 24px;font-weight: 400;color: #FFE6DF;}
}
.card-text-ani{
animation:lighter 0.75s ease-in-out infinite;
}
.prize-notice {
width: 450px;
height: 48px;
background: #C8ECFF;
border-radius: 24px;
line-height: 48px;
position: absolute;
top: 280px;
right: calc(50% - 225px) ;
align-items: center;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 35px;
}
.prize-notice-img{
width: 26px;
height: 23px;
margin-right: 19px;
}
.slider-frame{
height: 48px!important;
line-height: 48px!important;
}
.my-carousel .v-item {
width: 370px;
height: 100%;
font-size: 26px;
display: flex;
font-weight: normal;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
margin-left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<script>
function getAward(index){
console.log(index)
let frontDom = document.getElementsByClassName("card-list-item-front")[index-1];
let backDom = document.getElementsByClassName("card-list-item-back")[index-1];
frontDom.setAttribute("class","card-list-item-front choosed");
backDom.setAttribute("class","card-list-item-back choosed");
}
</script>
</head>
<body>
<div class="card-wrapper">
<div class="card-list">
<div class="card-list-item card1 move1">
<div class="card-list-item-wrapper" onClick={getAward(1)}>
<div class="card-list-item-front " ></div>
<div class="card-list-item-back">
<div class="card-list-item-back-text">点我翻牌</div>
</div>
</div>
</div>
<div class="card-list-item card2 move2">
<div class="card-list-item-wrapper" onClick={getAward(2)}>
<div class="card-list-item-front"></div>
<div class="card-list-item-back">
<div class="card-list-item-back-text">点我翻牌</div>
</div>
</div>
</div>
<div class="card-list-item card3 move3">
<div class="card-list-item-wrapper" onClick={getAward(3)}>
<div class="card-list-item-front"></div>
<div class="card-list-item-back">
<div class="card-list-item-back-text">点我翻牌</div>
</div>
</div>
</div>
</div>
</body>
</html>
图片就不提供了，自己找个图片换一下吧~
