workspace/.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224152846.scss

/* drift-bottle.component.scss */
:host {
    display: block;
}

/* 设置页面背景色 */
ion-content {
    --background: transparent; /* 确保内容背景透明 */
    position: relative;
    height: 100vh; /* 确保内容高度占满整个视口 */
}

.top-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; /* 图片占据页面的70%高度 */
    overflow: hidden;
    z-index: 0; /* 确保图片在工具栏之下 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 200%; /* 双倍宽度以支持平移 */
        height: 100%;
        background: url('/assets/img/漂流瓶.jpg') no-repeat center / cover;
        animation: wave-effect 5s linear infinite;
        filter: blur(5px); /* 添加轻微模糊效果，使波浪更柔和 */
    }
}
@keyframes wave-effect {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.top-image img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
    clip-path: ellipse(140% 130% at 50% -30%); /* 使用椭圆剪裁路径 */
}


.button-container {
    position: absolute;
    bottom: 15%; /* 调整此值以改变按钮距离底部的距离 */
    z-index: 2; /* 确保按钮在图片之上 */
}

.left-button {
    left: 30px; /* 距离左边的距离 */
}

.right-button {
    right: 30px; /* 距离右边的距离 */
}

.button-container img {
    width: 60px; /* 按钮图片宽度 */
    height: 60px; /* 按钮图片高度 */
    display: block;
}
.circular-button {
    width: 60px; /* 按钮图片宽度 */
    height: 60px; /* 按钮图片高度 */
    border-radius: 50%; /* 将图片剪裁为圆形 */
    object-fit: cover; /* 保证图片填充圆形区域 */
    transform: scale(1.5); /* 放大1.5倍 */
    transform-origin: center; /* 放大的基点为中心 */
    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
}

/* 如果需要，可以在悬停时添加一些效果 */
.circular-button:hover {
    transform: scale(1.6); /* 鼠标悬停时稍微再放大一点 */
}