beifan/company-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add carousel animation to Customization.astro

Browse Source
This commit is contained in:
郑肖毅
2026-02-11 13:45:21 +08:00
parent 5453a8f462
commit 35b0630625
1 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/sections/Customization.astro
View File

@@ -4,23 +4,6 @@
<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
<style>
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.animate-float {
animation: float 4s ease-in-out infinite;
}
</style>
<div class="max-w-7xl mx-auto">
@@ -29,11 +12,22 @@
<div class="flex flex-col md:flex-row items-center gap-8 md:gap-16 mb-12">
<div class="md:w-5/12 w-[85%] relative">
<div class="absolute -inset-4 bg-indigo-400/10 blur-3xl"></div>
<div class="animate-float relative overflow-hidden rounded-2xl shadow-[0_20px_50px_rgba(79,70,229,0.2)] border border-white">
<img src="/img/product-customization-1.webp" alt="园区IOC" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-6 text-white">
<p class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
<div class="relative overflow-hidden rounded-2xl shadow-[0_20px_50px_rgba(79,70,229,0.2)] border border-white">
<div id="slider-container" class="flex transition-transform duration-1000 ease-in-out" style="width: 200%;">
<div class="w-1/2 relative">
<img src="/img/product-customization-1.webp" alt="园区IOC" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-6 text-white">
<p class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
</div>
</div>
<div class="w-1/2 relative">
<img src="/img/product-customization-2.webp" alt="数字孪生" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-6 text-white">
<p class="text-sm font-bold tracking-widest opacity-80 uppercase">数字孪生</p>
</div>
</div>
</div>
</div>
</div>
@@ -347,3 +341,28 @@
</div>
<div class="mt-24"></div>
</section>
<script>
(function() {
const sliderContainer = document.getElementById('slider-container');
let currentIndex = 0;
const totalSlides = 2;
function updateSlide() {
if (!sliderContainer) return;
const translateX = -currentIndex * 50;
sliderContainer.style.transform = `translateX(${translateX}%)`;
}
function startAutoSlide() {
setInterval(() => {
currentIndex = (currentIndex + 1) % totalSlides;
updateSlide();
}, 5000);
}
if (sliderContainer) {
startAutoSlide();
}
})();
</script>