动画效果

This commit is contained in:
123 2025-05-06 09:47:25 +08:00
parent 553b6452d1
commit 992ee44ac5

View File

@ -178,8 +178,16 @@
display: flex;
transition: transform 0.5s ease;
height: 100%;
/* 以下为动画效果 */
opacity: 0; /* 初始透明 */
animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.carousel-item {
min-width: 100%;
height: 100%;
@ -326,6 +334,14 @@
#bbb {
z-index: 3;
}
#theshow {
transition: transform 0.5s ease; /* 平滑过渡效果 */
}
#theshow:hover {
transform: translateY(-10px);
/* 上浮10px */
}
</style>
</head>
@ -659,7 +675,7 @@
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<img src="{dreamer-cms:template /}images/IMG_20250429150832.png" alt="关于我们"
<img id="theshow" src="{dreamer-cms:template /}images/IMG_20250429150832.png" alt="关于我们"
class="rounded-lg shadow-xl">
</div>
<div class="md:w-1/2">