<template>
<div>
<!-- 上拉加载,下拉刷新 -->
<div class="container" v-for="i in 10" :key="i">
<h3>time</h3>
<h6>------</h6>
<span>这是content</span>
</div>
<div class="bg-bubbles">
<!-- 背景图片部分 -->
<ul>
<li v-for="(i,index) in 10" :key="index">
<router-link to="/story">
<!-- <img v-for="(item, i) in storyList" :key="item.id" :src="item.img" alt="" style="width: 100%;height:100%;" > -->
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'Past',
data() {
return {
storyList: []
}
},
created() {
this.$http.get('/mock/storyList').then((res) => {
console.log(res)
if (res.data.code === 200) {
this.storyList = res.data.data
}
})
}
}
</script>
<style lang="scss" scoped>
.bg-bubbles {
position: absolute;
// 使气泡背景充满整个屏幕;
top: 0;
left: 0;
width: 100%;
height: 100%;
// 如果元素内容超出给定的宽度和高度,overflow 属性可以确定是否显示滚动条等行为;
overflow: hidden;
li {
position: absolute;
// bottom 的设置是为了营造出气泡从页面底部冒出的效果;
bottom: -160px;
// 默认的气泡大小;
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 1);
list-style: none;
// 使用自定义动画使气泡渐现、上升和翻滚;
animation: square 15s infinite; //infinite 无限循环
transition-timing-function: linear;
// 分别设置每个气泡不同的位置、大小、透明度和速度,以显得有层次感;
&:nth-child(1) {
left: 10%;
width: 100px;
height: 100px;
}
&:nth-child(2) {
left: 20%;
width: 90px;
height: 90px;
animation-delay: 2s;
animation-duration: 7s;
}
&:nth-child(3) {
left: 25%;
width: 100px;
height: 100px;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 100px;
height: 100px;
animation-duration: 8s;
// background-color: rgba(255, 255, 255, 0.3);
}
&:nth-child(5) {
left: 70%;
width: 120px;
height: 120px;
animation-delay: 2s;
}
&:nth-child(6) {
left: 80%;
width: 80px;
height: 80px;
animation-delay: 3s;
// background-color: rgba(255, 255, 255, 0.2);
}
&:nth-child(7) {
left: 32%;
width: 140px;
height: 140px;
animation-delay: 2s;
}
&:nth-child(8) {
left: 55%;
width: 140px;
height: 140px;
animation-delay: 4s;
animation-duration: 15s;
}
&:nth-child(9) {
left: 25%;
width: 60px;
height: 60px;
animation-delay: 2s;
animation-duration: 12s;
// background-color: rgba(255, 255, 255, 0.3);
}
&:nth-child(10) {
left: 85%;
width: 100px;
height: 100px;
animation-delay: 5s;
}
}
// 自定义 square 动画;
@keyframes square {
0% {
opacity: 1;
transform: translateY(0px) rotate(45deg);
}
// 25% {
// opacity: 0.75;
// transform: translateY(-400px) rotate(90deg)
// }
// 50% {
// opacity: 1;
// transform: translateY(-600px) rotate(135deg);
// }
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
}
}
</style>
vue底部冒泡背景效果
猜你喜欢
转载自blog.csdn.net/Ann_52547/article/details/127615692
今日推荐
周排行