<template>
<div class="home">
<div class="bg">
<div class="css2">
<img
style="margin-top: 1rem; width: 3rem; height: 4rem"
src="~@/assets/img/bag3.png"
alt=""
/>
</div>
<div class="css3">
<img
style="margin-top: 1rem; width: 3rem; height: 4rem"
src="~@/assets/img/bag4.png"
alt=""
/>
</div>
<div class="css1">
<img
style="width: 4.5rem; height: 3.5rem;"
src="~@/assets/img/bag5.png"
alt=""
/>
</div>
<div class="css4" @click="gocode">
领取新年福袋
</div>
</div>
</div>
</template>
<script>
// import 自定义模块名称 from '模块标识符'
export default {
data() {
return {
status: 1,
};
},
mounted() {},
methods: {
gocode() {
console.log("123")
},
},
components: {},
computed: {},
};
</script>
<style lang="scss" scoped>
.bg {
// position: relative;
// border: 1px solid red;
// height: 754px;
height: 13.5rem;
// border: 1px solid red;
background-image: url(~@/assets/img/bagbg.png);
background-size: 8rem;
}
.css1 {
position: absolute;
width: 3.5rem;
height: 1.8rem;
// background-color: red;
color: white;
left: 2.1rem;
top: 5rem;
// bottom: 8.5rem;
-webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
animation: mymove 1s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {
top: 0;
}
}
/* Standard syntax */
@keyframes mymove {
0% {
top: 0;
}
}
.css2 {
position: absolute;
width: 120px;
height: 300px;
// background-color: rgb(80, 92, 255);
color: white;
top: 6.5rem;
left: 10px;
-webkit-animation: mymoves 2s; /* Chrome, Safari, Opera */
animation: mymoves 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymoves {
30% {
left: -300px;
}
}
/* Standard syntax */
@keyframes mymoves {
0% {
left: -300px;
}
}
.css3 {
position: absolute;
width: 120px;
height: 300px;
// background-color: rgb(80, 92, 255);
color: white;
top: 6.5rem;
right: 5px;
-webkit-animation: mymovess 2s; /* Chrome, Safari, Opera */
animation: mymovess 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymovess {
30% {
right: -300px;
}
}
/* Standard syntax */
@keyframes mymovess {
0% {
right: -300px;
}
}
.css4 {
position: absolute;
width: 2.7rem;
height: .7rem;
// background-color: rgb(80, 92, 255);
color: #ac2401;
font-family: PingFangSC-Medium;
font-weight: Medium;
font-size: 18px;
// top: 6rem;
left: 2.5rem;
top: 9.5rem;
// bottom: 2.5rem;
// bottom: -1rem;
-webkit-animation: mymovesss 3s; /* Chrome, Safari, Opera */
animation: mymovesss 3s;
background-image: url(~@/assets/img/bagbtn.png);
background-size: 2.7rem;
text-align: center;
line-height: .7rem;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymovesss {
30% {
top: 0px;
}
}
/* Standard syntax */
@keyframes mymovesss {
0% {
top: 0px;
}
}
</style>
css动画 新年快乐
于 2022-01-27 14:27:13 首次发布