${ASSET_HOST}为封装的统一的图片路径
<template>
<!-- :style="{backgroundImage: 'url(' + `${ASSET_HOST}/main_bg.jpg` + ')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}" -->
<div class="index">
<div class="index-bg" :style="{backgroundImage: 'url(' + `${ASSET_HOST}/main_bg.jpg` + ')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}">
<div class="title-box">
<a href="javascript:;" class="tips-btn">
<img :src="`${ASSET_HOST}/tips_icon.png`" class="btn-img" alt="">
</a>
<div class="title1">
<img :src="`${ASSET_HOST}/title_icon1.png`" class="title-icon1" alt="">
</div>
<div class="title2">
<img :src="`${ASSET_HOST}/title_icon2.png`" class="title-icon2" alt="">
</div>
<a href="javascript:;" class="win-record-btn">
<img :src="`${ASSET_HOST}/win_record_icon.png`" class="win-record-img" alt="">
</a>
</div>
<div class="lottery-area">
<div class="red-envelope-wall">
<div class="red-envelope-img-panel" >
<div class="red-envelope-img-for" v-for="(item,index) in imgList" :key="index">
<img class="red-envelope-red-envelopes" :src="item.img" alt="">
<img class="red-envelope-draw" :src="`${ASSET_HOST}/draw.png`" alt="">
<img class="red-envelope-hand" :src="`${ASSET_HOST}/hand.png`" alt="">
</div>
</div>
</div>
</div>
<div class="lottery-time">
剩余:6次
</div>
</div>
</div>
</template>
<script>
export default {
name: 'index',
components: {},
data() {
return {
imgList:[
{id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
{id:2,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
{id:3,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
{id:4,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
{id:5,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
{id:6,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
{id:7,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
{id:8,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
{id:9,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
],
showDialog: false,
};
},
computed: {},
watch: {},
methods: {
showPopup() {
this.showDialog = true;
setTimeout(() =>{
document.body.querySelector('.paper').style = ' top: calc(50% - 100px);'
},100);
},
},
}
</script>
<style lang='scss' scoped>
.index{
width: 100%;
height: 100vh;
background: linear-gradient(0deg, #F19D60,#FBE7D1, #FDF7E9);
.index-bg{
height: 100vh;
position: relative;
}
.title-box{
padding-top: 51px;
position: relative;
.tips-btn{
display: block;
width: 40px;
height: 41px;
position: absolute;
left: 37px;
top: 33px;
.btn-img{
display: block;
width: 100%;
height: 100%;
}
}
.win-record-btn{
display: block;
width: 150px;
height: 150px;
position: absolute;
right: 4px;
top: 10px;
.win-record-img{
display: block;
width: 100%;
height: 100%;
}
}
.title1{
width: 421px;
height: 159px;
margin: auto;
.title-icon1{
display: block;
width: 100%;
height: 100%;
}
}
.title2{
width: 715px;
height: 176px;
margin:0 auto;
margin-top: -10px;
.title-icon1{
display: block;
width: 100%;
height: 100%;
}
}
}
.lottery-area{
// margin-top: 100px;
// height: 507px;
// background: #ff000066;
}
.lottery-time{
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 60px;
text-align: center;
font-size: 38px;
font-family: Alibaba PuHuiTi;
font-weight: bold;
color: #FFFFFE;
line-height: 468px;
text-shadow: 0px 2px 4px rgba(219, 143, 33, 0.53);
background: linear-gradient(180deg, #F7F3B5 0%, #FAE260 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes an1{
0%{
transform: rotateY(0deg) ;
}
50%{
transform: rotateY(180deg) ;
}
100%{
transform: rotateY(360deg) ;
}
}
// 注释现有的运用此代码可使旋转木马旋转120度停一下后继续旋转,不断循环
// @keyframes an1{
// 0% {
// transform: rotateY(0deg);
// }
// 23% {
// transform: rotateY(120deg);
// }
// 33% {
// transform: rotateY(120deg);
// }
// 56% {
// transform: rotateY(240deg);
// }
// 66% {
// transform: rotateY(240deg);
// }
// 89% {
// transform: rotateY(360deg);
// }
// 100% {
// transform: rotateY(360deg);
// }
// }
.red-envelope-wall{
// margin: 100px auto;
// perspective: 3000px; //设置元素被查看位置的视图
perspective: 600px;
}
.red-envelope-img-panel{
transform-style: preserve-3d;
animation: an1 18s linear 0s infinite;
}
.red-envelope-img-for{
width: 182px;
height:260px;
margin: auto;
top:280px;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.red-envelope-red-envelopes{
width: 100%;
height: 100%;
}
.red-envelope-draw{
width: 136px;
height: 135px;
position: absolute;
top: 60px;
left: 25px;
}
.red-envelope-hand{
width: 122px;
height: 114px;
position: absolute;
top: 130px;
left: 80px;
}
.red-envelope-img-for:nth-child(1){
transform: rotateY(0deg) translateZ(250px);
}
.red-envelope-img-for:nth-child(2){
transform: rotateY(40deg) translateZ(250px);
}
.red-envelope-img-for:nth-child(3){
transform: rotateY(80deg) translateZ(250px);
}
.red-envelope-img-for:nth-child(4){
transform: rotateY(120deg) translateZ(250px);
}
.red-envelope-img-for:nth-child(5){
transform: rotateY(160deg) translateZ(250px);
}
.red-envelope-img-for:nth-child(6){
transform: rotateY(200deg) translateZ(250px);
}
.red-envelope-img-for:nth-child(7){
transform: rotateY(240deg) translateZ(250px);
}
.red-envelope-img-for:nth-child(8){
transform: rotateY(280deg) translateZ(250px);
}
.red-envelope-img-for:nth-child(9){
transform: rotateY(320deg) translateZ(250px);
}
}
</style>
参考文章链接: https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
3d轮播图链接:https://www.cnblogs.com/cquptzy/p/7610207.html
三个div轮流旋转:
<template>
<!-- :style="{backgroundImage: 'url(' + `${ASSET_HOST}/main_bg.jpg` + ')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}" -->
<div class="index">
<figure class="icon-cards">
<div class="icon-cards__content">
<div class="icon-cards__item"></div>
<div class="icon-cards__item"></div>
<div class="icon-cards__item"></div>
</div>
</figure>
</div>
</template>
<script>
export default {
name: "index",
components: {},
data() {
return {
};
},
computed: {},
watch: {},
created () {
},
mounted () {
},
};
</script>
<style lang='scss' scoped>
.index {
.icon-cards {
position: absolute;
top: 50%;
left: 50%;
width: 190px;
height: 210px;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.icon-cards__content {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
-webkit-animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}
.icon-cards__item {
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 210px;
border-radius: 6px;
}
.icon-cards__item:nth-child(1) {
background: rgba(252, 192, 77, 0.9);
-webkit-transform: rotateY(0) translateZ(182px);
transform: rotateY(0) translateZ(182px);
}
.icon-cards__item:nth-child(2) {
background: rgba(49, 192, 204, 0.9);
-webkit-transform: rotateY(120deg) translateZ(182px);
transform: rotateY(120deg) translateZ(182px);
}
.icon-cards__item:nth-child(3) {
background: rgba(166, 55, 12, 0.9);
-webkit-transform: rotateY(240deg) translateZ(182px);
transform: rotateY(240deg) translateZ(182px);
}
@-webkit-keyframes carousel {
0%, 17.5% {
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
}
27.5%,
45% {
-webkit-transform: translateZ(-182px) rotateY(-120deg);
transform: translateZ(-182px) rotateY(-120deg);
}
55%,
72.5% {
-webkit-transform: translateZ(-182px) rotateY(-240deg);
transform: translateZ(-182px) rotateY(-240deg);
}
82.5%,
100% {
-webkit-transform: translateZ(-182px) rotateY(-360deg);
transform: translateZ(-182px) rotateY(-360deg);
}
}
@keyframes carousel {
0%, 17.5% {
-webkit-transform: translateZ(-182px) rotateY(0);
transform: translateZ(-182px) rotateY(0);
}
27.5%,
45% {
-webkit-transform: translateZ(-182px) rotateY(-120deg);
transform: translateZ(-182px) rotateY(-120deg);
}
55%,
72.5% {
-webkit-transform: translateZ(-182px) rotateY(-240deg);
transform: translateZ(-182px) rotateY(-240deg);
}
82.5%,
100% {
-webkit-transform: translateZ(-182px) rotateY(-360deg);
transform: translateZ(-182px) rotateY(-360deg);
}
}
}
</style>
参考链接:https://wow.techbrood.com/fiddle/10516