[fix]solutions-card增加背景动画

openwharf-group · Jan 5, 2024 · b582c9f · b582c9f
1 parent bab74d1
commit b582c9f
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/components/home/HomeSolutionsCard.astro b/src/components/home/HomeSolutionsCard.astro
@@ -114,6 +114,7 @@ const solutionList = [
     /* box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.8); */
     background-size: cover;
     background-position: center;
+
   }
   .solution-container > .solutions-card:first-of-type {
     margin-left: 0;
@@ -134,6 +135,7 @@ const solutionList = [
   }
   input:checked + label {
     flex: 1;
+    animation: zoom-animation 5s infinite;
   }
   input:checked + label .main-title {
     animation: showcontent 0.3s ease-in-out 0.3s 1 forwards;
@@ -144,6 +146,7 @@ const solutionList = [
   input:checked + label .button {
     animation: showcontent 0.3s ease-in-out 0.3s 1 forwards;
   }
+
   .solutions-card[for='c0'] {
     background-image: url('https://img.alicdn.com/imgextra/i1/O1CN017UPiCy1xJmqGNV93n_!!6000000006423-2-tps-1688-1016.png');
   }
@@ -158,6 +161,15 @@ const solutionList = [
   }
 
 
+@keyframes zoom-animation {
+  0% { background-size: 100% cover; }
+  5% { background-size: 100% auto; }
+  50% { background-size: 140% auto; }
+  100% { background-size: 100% auto; }
+}
+
+
+
   /* 小于50rem  小于 800px */
   @media (max-width: 50rem) {
     .card-solution {