869 lines
19 KiB
Vue
869 lines
19 KiB
Vue
<!-- payPage.vue -->
|
||
|
||
<template>
|
||
<view>
|
||
<!-- 气泡 -->
|
||
<!-- <view class="container">
|
||
<view class="bubble" v-for="bubble in bubbles" :key="bubble.id"></view>
|
||
</view> -->
|
||
<!-- <view></view> -->
|
||
|
||
<!-- 光线 -->
|
||
<!-- <view class="light-container">
|
||
<view class="light" v-for="(light, index) in lights" :key="index" :style="getLightStyle(index)"></view>
|
||
</view> -->
|
||
|
||
|
||
<!-- 按钮 -->
|
||
|
||
<!-- <view class="container">
|
||
<view class="btn" @click="handleClick">
|
||
<text class="btn-text">立即开盒</text>
|
||
</view>
|
||
</view> -->
|
||
<!-- <div class="sss">
|
||
<div
|
||
class="your-div-class"
|
||
v-for="(item, index) in items"
|
||
:key="index"
|
||
:style="{
|
||
animationDelay: item.delay + 's',
|
||
left: item.startX + 'px'
|
||
}"
|
||
></div>
|
||
</div> -->
|
||
<!-- <div class="sss">
|
||
<div class="your-div-class" v-for="(item, index) in items" :key="index" :style="{
|
||
animationDelay: item.delay + 's',
|
||
left: item.startX + 'px'
|
||
}"></div>
|
||
</div> -->
|
||
<!-- <view class="container">
|
||
<button class="centered-arrow-button">
|
||
<span class="arrow top-arrow"></span>
|
||
<span class="text">点击我</span>
|
||
<span class="arrow bottom-arrow"></span>
|
||
</button>
|
||
</view> -->
|
||
|
||
<!-- 礼花 -->
|
||
<!-- <view class="particle-container" @click="triggerFirework">
|
||
<view class="firework" v-if="showFirework">
|
||
<view class="particle" v-for="(particle, index) in particles" :key="index" :style="getParticleStyle(index)"></view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="particle-container">
|
||
<view class="firework">
|
||
<view class="particle" v-for="(particle, index) in particles" :key="index" :style="getParticleStyle(index)"></view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <iframe :src="url" frameborder="0"></iframe> -->
|
||
<!-- <web-view :src="url" @message="handleMessage"></web-view> -->
|
||
<!-- <view @click="payBack" style="z-index: 99999;position: fixed;bottom: 20rpx;text-align: center;color: #fff;width: 100%;">返回查看订单</view> -->
|
||
<!-- 退出登录弹框 -->
|
||
<!-- <popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="9999">
|
||
<view class="log-out">
|
||
<view class="log-out-tip">是否支付成功？</view>
|
||
<view class="log-out-footer">
|
||
<view class="cancel" @click="closeLogOut">未完成支付</view>
|
||
<view class="shu"></view>
|
||
<view class="log-out-submit" @click="submitLogOut">已完成支付</view>
|
||
</view>
|
||
</view>
|
||
</popup-view> -->
|
||
<!-- <div id="player-container" style="width: 640px; height: 480px;"></div> -->
|
||
|
||
<!-- <view class="player-container">
|
||
<div id="player-container"></div>
|
||
</view> -->
|
||
|
||
|
||
<!-- <view class="list">
|
||
<view v-for="(item,index) in list" :key="index" :style="getBlockStyle(index)" class="list-item"></view>
|
||
</view> -->
|
||
<view style="border: 1px solid red;width: 100rpx;height: 100rpx;pointer-events: none;z-index: 100;">
|
||
<SpineCom skelUrl="/static/spine/guan_yu/guan_yu.skel" atlasUrl="/static/spine/guan_yu/guan_yu.atlas" />
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
// import 'https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.min.js'
|
||
// import "https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.min.css"
|
||
import {
|
||
timers
|
||
} from 'jquery';
|
||
import {
|
||
|
||
coinPaidApi
|
||
} from '@/API/user.js'
|
||
import SpineCom from '@/pages/components/spine.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
url: '', // 支付页面的URL
|
||
no: '',
|
||
timer: null,
|
||
settlement: 0,
|
||
coin: 0,
|
||
gift: 0,
|
||
logOutvisible: false,
|
||
// 气泡
|
||
bubbles: Array.from({
|
||
length: 5
|
||
}, (_, id) => ({
|
||
id
|
||
})),
|
||
// 光线
|
||
lights: Array(10).fill(''),
|
||
// 礼花
|
||
particles: Array(50).fill(''), // 生成50个粒子
|
||
showFirework: false,
|
||
|
||
timeSec: 0,
|
||
// items: Array.from({ length: 10 }).map(() => ({
|
||
// delay: Math.random() * 5,
|
||
// startX: Math.random() * 450, // Assuming the container width is 500px and element width is 50px
|
||
// }))
|
||
items: Array.from({
|
||
length: 6
|
||
}).map(() => ({
|
||
delay: Math.random() * 5,
|
||
startX: Math.random() *
|
||
250, // Assuming the container width is 500px and element width is 50px
|
||
})),
|
||
|
||
|
||
list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
|
||
|
||
};
|
||
},
|
||
components:{SpineCom},
|
||
onLoad(query) {
|
||
this.url = decodeURIComponent(query.url);
|
||
document.write(this.url)
|
||
this.no = query.no
|
||
this.settlement = query.settlement
|
||
this.coin = query.coin
|
||
this.gift = query.gift
|
||
|
||
this.previousUrl = this.$route.fullPath;
|
||
|
||
|
||
|
||
// new spine.SpinePlayer("player-container", {
|
||
// skeleton: "/files/spineboy/export/spineboy-pro.json",
|
||
// atlas: "/files/spineboy/export/spineboy.atlas",
|
||
// });
|
||
// this.loadSpinePlayer();
|
||
},
|
||
watch: {
|
||
timeSec() {
|
||
if (this.timeSec == 30) {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
this.logOutvisible = false
|
||
this.$api.msg('未查询到支付结果')
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getBlockStyle(index){
|
||
const cols = 3;
|
||
const windowWidth = window.innerWidth;
|
||
const elWidth = 150;
|
||
const elHeight = 150;
|
||
|
||
const spaceX = (windowWidth - (elWidth * cols)) / (cols+1);
|
||
|
||
const startX = spaceX;
|
||
const startY = 0;
|
||
|
||
const rowList = [
|
||
0,0,0,
|
||
1,
|
||
2,
|
||
3,3,3,
|
||
4,
|
||
5,
|
||
]
|
||
const offset = Math.floor(index / rowList.length ) * 6;
|
||
const row =rowList[index % rowList.length] + offset;
|
||
|
||
const colList = [
|
||
0,1,2,
|
||
2,
|
||
2,
|
||
2,1,0,
|
||
0,
|
||
0,
|
||
]
|
||
const col = colList[index % colList.length]
|
||
|
||
let left = (col * elWidth) + (col * spaceX);
|
||
let top = startY + (elHeight * row);
|
||
|
||
|
||
return {
|
||
left:left+"px",
|
||
top:top+"px"
|
||
}
|
||
},
|
||
loadSpinePlayer() {
|
||
// 动态加载 CSS
|
||
const link = document.createElement('link');
|
||
link.rel = 'stylesheet';
|
||
link.href = 'https://unpkg.com/@esotericsoftware/spine-player@4.2.56/dist/spine-player.min.css';
|
||
document.head.appendChild(link);
|
||
//
|
||
// 动态加载 JS
|
||
const script = document.createElement('script');
|
||
// script.src = 'https://unpkg.com/@esotericsoftware/spine-player@4.2.56/dist/iife/spine-player.min.js';
|
||
script.src = '/static/spine-player.js';
|
||
script.onload = this.initializeSpinePlayer;
|
||
document.body.appendChild(script);
|
||
},
|
||
initializeSpinePlayer() {
|
||
|
||
new spine.SpinePlayer("player-container", {
|
||
skelUrl: "/static/spine/guan_yu/guan_yu.skel",
|
||
atlasUrl: "/static/spine/guan_yu/guan_yu.atlas",
|
||
// animation: "run",
|
||
premultipliedAlpha: false,
|
||
backgroundColor: "#00000000",
|
||
// viewport: {
|
||
// debugRender: true,
|
||
// },
|
||
// showControls: true,
|
||
alpha: true, // 可选：是否透明
|
||
});
|
||
// const player = new spine.SpinePlayer('player-container', {
|
||
// binaryUrl: '/static/spine/ai_ren/ai_ren.skel',
|
||
// atlasUrl: '/static/spine/ai_ren/ai_ren.atlas',
|
||
// // json: 'static/spine_ui_zuqiu/spine_ui_zuqiu.json',
|
||
// // atlas: 'static/spine_ui_zuqiu/spine_ui_zuqiu.atlas.txt',
|
||
// // skeleton: "https://esotericsoftware.com/files/examples/4.2/spineboy/export/spineboy-pro.skel",
|
||
// // animation: 'animation', // 可选：默认动画
|
||
// // backgroundColor: '##00000000', // 可选：背景颜色
|
||
// // alpha: true, // 可选：是否透明
|
||
// });
|
||
},
|
||
|
||
|
||
|
||
|
||
// 光线
|
||
getLightStyle(index) {
|
||
const delay = Math.random() * 2; // 随机延迟时间 0 到 2 秒
|
||
const leftPosition = Math.random() * 100; // 随机水平位置 0% 到 100%
|
||
return {
|
||
animationDelay: `${delay}s`,
|
||
left: `${leftPosition}%`
|
||
};
|
||
},
|
||
// 礼花
|
||
getParticleStyle(index) {
|
||
const angle = (index / this.particles.length) * 360; // 每个粒子的角度
|
||
const color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
|
||
const delay = Math.random() * 0.5; // 随机延迟时间 0 到 0.5 秒
|
||
return {
|
||
backgroundColor: color,
|
||
transform: `rotate(${angle}deg) translate(0, -50px)`,
|
||
animationDelay: `${delay}s`
|
||
};
|
||
},
|
||
triggerFirework() {
|
||
this.showFirework = true;
|
||
setTimeout(() => {
|
||
this.showFirework = false;
|
||
}, 1500); // 动画结束后隐藏礼花
|
||
},
|
||
closeLogOut() {
|
||
this.logOutvisible = false
|
||
},
|
||
submitLogOut() {
|
||
this.getOrderPaid(this.no)
|
||
this.timer = setInterval(() => {
|
||
this.timeSec += 3
|
||
this.logOutvisible = false
|
||
this.getOrderPaid(this.no)
|
||
}, 3000);
|
||
},
|
||
payBack() {
|
||
uni.redirectTo({
|
||
url: `/pages/mine/topUp?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}&no=${this.no}`
|
||
})
|
||
},
|
||
getOrderPaid(no) {
|
||
uni.showLoading({
|
||
|
||
})
|
||
coinPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
this.logOutvisible = false
|
||
if (payResult.data) {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
uni.hideLoading()
|
||
// uni.redirectTo({
|
||
// url: `/pages/mine/topUpSuc?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}`
|
||
// })
|
||
uni.redirectTo({
|
||
url: `/pages/mine/topUpSuc?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}`
|
||
})
|
||
// uni.redirectTo({
|
||
// url: `/pages/mine/topUp?price=${this.settlement}&coin=${this.coin}&gift=${this.gift}&no=${this.no}`
|
||
// })
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
},
|
||
onHide() {
|
||
this.logOutvisible = true
|
||
},
|
||
onUnload() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.timer);
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
// 气泡
|
||
.container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
background-color: #0e0b16;
|
||
}
|
||
|
||
.bubble {
|
||
position: absolute;
|
||
bottom: -100px;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
animation: rise 6s infinite ease-in, float 3s infinite ease-in-out;
|
||
}
|
||
|
||
.bubble:nth-child(1) {
|
||
left: 20%;
|
||
width: 60px;
|
||
height: 60px;
|
||
animation-duration: 8s, 4s;
|
||
animation-delay: 0s, 0s;
|
||
}
|
||
|
||
.bubble:nth-child(2) {
|
||
left: 40%;
|
||
width: 40px;
|
||
height: 40px;
|
||
animation-duration: 7s, 3.5s;
|
||
animation-delay: 1s, 1s;
|
||
}
|
||
|
||
.bubble:nth-child(3) {
|
||
left: 60%;
|
||
width: 80px;
|
||
height: 80px;
|
||
animation-duration: 9s, 4.5s;
|
||
animation-delay: 2s, 2s;
|
||
}
|
||
|
||
.bubble:nth-child(4) {
|
||
left: 80%;
|
||
width: 50px;
|
||
height: 50px;
|
||
animation-duration: 8s, 4s;
|
||
animation-delay: 3s, 1.5s;
|
||
}
|
||
|
||
.bubble:nth-child(5) {
|
||
left: 50%;
|
||
width: 70px;
|
||
height: 70px;
|
||
animation-duration: 7.5s, 3.75s;
|
||
animation-delay: 2.5s, 1.25s;
|
||
}
|
||
|
||
@keyframes rise {
|
||
0% {
|
||
bottom: -100px;
|
||
}
|
||
|
||
100% {
|
||
bottom: 100vh;
|
||
}
|
||
}
|
||
|
||
@keyframes float {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translateX(50px);
|
||
}
|
||
}
|
||
|
||
.log-out {
|
||
width: 590rpx;
|
||
height: 300rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
|
||
.log-out-tip {
|
||
height: 200rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
line-height: 200rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.log-out-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 2rpx solid rgba(0, 0, 0, 0.06);
|
||
height: 100rpx;
|
||
|
||
.cancel {
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
text-align: center;
|
||
border-right: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.log-out-submit {
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #E55353;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 光线
|
||
.light-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #000;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.light {
|
||
position: absolute;
|
||
bottom: -300px;
|
||
/* 确保初始位置在视口外 */
|
||
width: 2px;
|
||
height: 150px;
|
||
/* 增加高度，使光线更加明显 */
|
||
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%);
|
||
animation: moveLight 4s linear infinite;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
@keyframes moveLight {
|
||
0% {
|
||
bottom: -100px;
|
||
opacity: 0;
|
||
}
|
||
|
||
25% {
|
||
opacity: 1;
|
||
}
|
||
|
||
75% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
bottom: 100vh;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.particle-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #000;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.firework {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.particle {
|
||
position: absolute;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
transform-origin: center;
|
||
animation: explode 1s ease-out forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
@keyframes explode {
|
||
0% {
|
||
transform: translate(0, 0);
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
transform: translate(0, -200px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
|
||
// .shine-button {
|
||
// display: inline-block;
|
||
// padding: 10px 20px;
|
||
// border-radius: 4px;
|
||
// background-color: #409EFF;
|
||
// color: #fff;
|
||
// border: none;
|
||
// cursor: pointer;
|
||
// position: relative;
|
||
// overflow: hidden;
|
||
// }
|
||
// .shine-button::before {
|
||
// content: "";
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: -100%;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
|
||
// animation: shine 2s linear infinite;
|
||
// }
|
||
|
||
// @keyframes shine {
|
||
// 0% {
|
||
// left: -100%;
|
||
// }
|
||
// 50%, 100% {
|
||
// left: 100%;
|
||
// }
|
||
// }
|
||
.container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
}
|
||
|
||
.centered-arrow-button {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.text {
|
||
z-index: 2;
|
||
/* 确保文本在箭头上方 */
|
||
}
|
||
|
||
.arrow {
|
||
position: absolute;
|
||
width: 20px;
|
||
/* 箭头宽度 */
|
||
height: 10px;
|
||
/* 箭头高度 */
|
||
background: currentColor;
|
||
/* 使用父元素的文字颜色 */
|
||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||
/* 创建一个向上的箭头 */
|
||
animation: moveArrow 2s linear infinite;
|
||
}
|
||
|
||
.top-arrow {
|
||
top: 0;
|
||
transform: translateY(-100%);
|
||
/* 初始位置在按钮上方 */
|
||
}
|
||
|
||
.bottom-arrow {
|
||
bottom: 0;
|
||
transform: translateY(100%);
|
||
/* 初始位置在按钮下方 */
|
||
clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
|
||
/* 创建一个向下的箭头 */
|
||
}
|
||
|
||
@keyframes moveArrow {
|
||
0% {
|
||
transform: translateY(-100%) scaleX(1);
|
||
/* 向上箭头从上方开始，向下箭头从下方开始 */
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(0) scaleX(1.2);
|
||
/* 箭头在中间时稍微放大 */
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(100%) scaleX(1);
|
||
/* 向上箭头移动到下方，向下箭头移动到上方 */
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
@keyframes fadeInUp {
|
||
0% {
|
||
transform: translateY(100%);
|
||
/* 从底部开始，移动到其原始位置下方 */
|
||
opacity: 0;
|
||
/* 初始时完全透明 */
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(0);
|
||
/* 移动到其原始位置 */
|
||
opacity: 1;
|
||
/* 完全不透明 */
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
/* 移动到其原始位置 */
|
||
opacity: 0;
|
||
/* 完全不透明 */
|
||
}
|
||
}
|
||
|
||
// .sss {
|
||
// height: 500px; /* 容器高度为500px */
|
||
// position: relative; /* 设置为相对定位，以便子元素可以使用绝对定位 */
|
||
// overflow: hidden; /* 隐藏超出容器的内容，如果需要的话 */
|
||
// }
|
||
|
||
// .sss {
|
||
// width: 500px;
|
||
// height: 500px;
|
||
// position: relative;
|
||
// background-color: lightgray;
|
||
// overflow: hidden; /* 确保元素不会超出容器 */
|
||
// }
|
||
|
||
// .your-div-class {
|
||
// width: 50px;
|
||
// height: 50px; /* 假设高度为50px，可以根据需要调整 */
|
||
// border-radius: 50%;
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
// background-color: blue;
|
||
// animation: moveToTop 5s ease-in-out infinite; /* 3s是动画持续时间，可以根据需要调整 */
|
||
// }
|
||
|
||
// @keyframes moveToTop {
|
||
// 0% {
|
||
// bottom: -50px; /* 初始位置在容器底部以下 */
|
||
// opacity: 0;
|
||
// }
|
||
// 10% {
|
||
// opacity: 1; /* 进入容器后变为不透明 */
|
||
// }
|
||
// 90% {
|
||
// opacity: 0; /* 在离开容器前保持不透明 */
|
||
// }
|
||
// 100% {
|
||
// bottom: 100%; /* 结束位置在容器顶部以上 */
|
||
// opacity: 0; /* 离开容器后变为透明 */
|
||
// }
|
||
// }
|
||
// .sss {
|
||
// position: relative;
|
||
// width: 100%;
|
||
// height: 500rpx;
|
||
// background-color: #f0f0f0;
|
||
// }
|
||
|
||
// .your-div-class {
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
// width: 50rpx;
|
||
// height: 50rpx;
|
||
// background-color: #007BFF;
|
||
// animation: moveUp 5s infinite linear;
|
||
// }
|
||
|
||
// @keyframes moveUp {
|
||
// 0% {
|
||
// left: 0;
|
||
// bottom: 0;
|
||
// }
|
||
// 50% {
|
||
// left: calc(100% - 350rpx); /* Assuming the width of .your-div-class is 50px */
|
||
// bottom: 50%;
|
||
// }
|
||
// 100% {
|
||
// left: 0;
|
||
// bottom: 100%;
|
||
// }
|
||
// }
|
||
|
||
.sss {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
// background-color: red;
|
||
}
|
||
|
||
.your-div-class {
|
||
width: 100rpx;
|
||
/* 自定义宽度 */
|
||
height: 100rpx;
|
||
/* 自定义高度 */
|
||
position: absolute;
|
||
bottom: -110rpx;
|
||
background-color: #3498db;
|
||
/* 蓝色 */
|
||
border-radius: 50%;
|
||
/* 圆形 */
|
||
animation: moveUp 4s linear infinite, moveHorizontal 4s ease-in-out infinite alternate;
|
||
transform: translateX(0);
|
||
/* 初始位置 */
|
||
}
|
||
|
||
@keyframes moveUp {
|
||
0% {
|
||
bottom: 0;
|
||
opacity: 0;
|
||
transform: translateY(0);
|
||
/* 初始位置 */
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
|
||
100% {
|
||
bottom: 100%;
|
||
opacity: 0;
|
||
transform: translateY(-100%);
|
||
/* 终止位置 */
|
||
}
|
||
}
|
||
|
||
@keyframes moveHorizontal {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translateX(100rpx);
|
||
/* 随机范围内的最大水平移动距离 */
|
||
}
|
||
}
|
||
|
||
// .sss {
|
||
// width: 500px;
|
||
// height: 500px;
|
||
// position: relative;
|
||
// overflow: hidden;
|
||
// }
|
||
|
||
// .your-div-class {
|
||
// width: 50px; /* 自定义宽度 */
|
||
// height: 50px; /* 自定义高度 */
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
// background-color: #3498db; /* 蓝色 */
|
||
// border-radius: 50%; /* 圆形 */
|
||
// animation: moveUp 4s linear infinite, moveHorizontal 2s ease-in-out infinite alternate;
|
||
// }
|
||
|
||
// @keyframes moveUp {
|
||
// 0% {
|
||
// bottom: 0;
|
||
// opacity: 0;
|
||
// }
|
||
// 50% {
|
||
// opacity: 1;
|
||
// }
|
||
// 100% {
|
||
// bottom: 100%;
|
||
// opacity: 0;
|
||
// }
|
||
// }
|
||
|
||
// @keyframes moveHorizontal {
|
||
// 0%, 100% {
|
||
// transform: translateX(0);
|
||
// }
|
||
// 50% {
|
||
// transform: translateX(100px); /* 随机范围内的最大水平移动距离 */
|
||
// }
|
||
// }
|
||
|
||
|
||
.player-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-image: url('@/static/new/bg.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
#player-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.list{
|
||
|
||
.list-item{
|
||
position: absolute;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border: 1px solid red;
|
||
background-color: red;
|
||
}
|
||
}
|
||
</style> |