武汉游|软件专业大学生结课作业-CSDN博客

本文链接：https://blog.csdn.net/zyx_005/article/details/146207002

页面实现效果

动画特效介绍

动画效果：每个背景类（bg、bg2、bg3）都设置了transition: all 0.3s ease。当背景类切换时，背景图片的切换会有 0.3 秒的过渡动画，动画效果是缓动的（ease），给用户一种平滑过渡的视觉体验。

动画效果：当鼠标悬停在导航栏链接上时（nav li a:hover），背景色会在 0.3 秒内（transition: all 0.3s ease）变为royalblue，同时文字颜色保持为白色。这种动画效果让用户能够清楚地知道当前鼠标所指向的链接是可点击的。

当鼠标悬停在推荐图片上时（recommendation - img:hover），图片会在 0.2 秒内（transition: all 0.2s linear）放大到 1.2 倍（transform: scale(1.2)）。这种动画效果可以突出用户当前鼠标指向的景点图片，吸引用户查看详情。

当鼠标悬停在景点卡片上（.attraction-card:hover）时，卡片会在 0.3 秒内（transition:transform 0.3s ease）沿着 Y 轴向下移动 25px（transform: translateY(25px)），仿佛卡片从页面上浮起一点，吸引用户进一步关注该景点的信息，增加了页面的交互感。

当鼠标悬停在历史事件卡片上（.item:hover）时，卡片会在 0.3 秒内发生一系列变化，包括宽度从 370px 变为 400px，边框半径从 8px 变为 10px，内边距从 12px 变为 15px，阴影从0 2px 8px rgba(0, 0, 0, 0.1)变为0 2px 8px rgba(11, 11, 0, 1)，通过这些变化，使卡片在鼠标悬停时显得更加突出，吸引用户进一步关注历史事件的详细信息。

当鼠标悬停在卡片（.culture - card:hover）上时，卡片会在 0.3 秒内发生变化。宽度从默认值变为 600px，边框半径从 8px 变为 10px，阴影从0 2px 8px rgba(0, 0, 0, 0.1)变为8px 8px 25px rgba(11, 11, 0, 5)，产生一种独特的交互效果，突出显示当前鼠标指向的文化信息，吸引用户查看详情。

当鼠标悬停在卡片上时，卡片会以scale(1.1)的比例放大，即放大 1.1 倍。这种放大效果给人一种突出显示的视觉感受，使得用户能够更加关注当前悬停的卡片内容。同时，卡片上的文字信息（.culture - info）会逐渐透明直至消失。这是通过改变opacity属性实现的，从初始的不透明状态（通常为opacity: 1）变为完全透明（opacity: 0）。这种效果为用户交互增添了一种动态感。

当鼠标悬停在新闻卡片上时，卡片会在 0.3 秒内（transition: all 0.3s ease）沿着 Y 轴向上移动 5px（transform: translateY(-5px)），同时阴影从0 0 5px rgba(0, 0, 0, 0.2)变为0 4px 15px rgba(0, 0, 0, 0.1)，使卡片在鼠标悬停时显得更加立体和突出。当鼠标悬停在新闻卡片上时，新闻卡片内的内容区域（.news - content）背景色会在 0.3 秒内变为#0263CC（.news - card:hover.news - content），同时文字颜色（包括标题、段落和按钮文字）会变为白色，营造出一种突出显示的效果。当鼠标悬停在新闻卡片的图片包裹元素上时，其之前定义的遮罩层（.news - img - wrapper::before）的透明度会在 0.3 秒内从 0 变为 0.8，产生一种图片上覆盖半透明蓝色遮罩的效果，吸引用户注意力。

当鼠标悬停在活动卡片上时，卡片会在 0.3 秒内放大 1.1 倍（transform: scale(1.1)），并且会出现一个旋转的彩色渐变背景（通过::before伪元素和@keyframes动画实现），背景从中心向外扩展，形成一种独特的视觉效果，使活动卡片在鼠标悬停时更加引人注目，吸引用户查看活动详情。

当切换幻灯片时，当前激活的幻灯片透明度会在 1 秒内以缓入缓出（ease-in-out）的方式从 0 变为 1 显示出来，而之前激活的幻灯片则从 1 变为 0 隐藏，实现了平滑的切换效果，让轮播图的展示更自然流畅，引导用户浏览不同的宣传文案和对应的背景图。当点击某个控制按钮时，该按钮的背景色会在 0.3 秒内（transition: background-color 0.3s ease）从半透明的灰色（rgba(255, 255, 255, 0.5)）变为白色（.slider-dot.active），清晰地提示用户当前选中的是哪一张幻灯片对应的按钮，增强了轮播图的交互性和可视性。