Web前端使用Htnl,css实现，真寻动态动漫网站

这是一个动漫角色展示网站的HTML和CSS代码。具有动态效果

主要功能特点

1. 导航栏悬停填充效果

导航栏菜单项在鼠标悬停时会有颜色填充动画：

.ar2 li {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ar2 li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 1;
}

/* 蓝色框项填充效果 */
.ar2 li:nth-child(2n)::before {
    background-color: #45bbff;
}

/* 粉色框项填充效果 */ 
.ar2 li:nth-child(2n-1)::before {
    background-color: #ee858c;
}

/* 悬停时填充 */
.ar2 li:hover::before {
    left: 0;
}

• 使用伪元素 ::before 创建填充层

• 初始状态位于左侧外部 (left: -100%)

• 悬停时滑入 (left: 0)

• 蓝色(#45bbff)和粉色(#ee858c)交替填充

• 平滑的过渡动画效果

2. 右侧图片浮动效果

右侧图片区域有8张图片以不同角度浮动：

.stacked-image {
    position: absolute;
    opacity: 0;
    animation: fadeIn 0.5s forwards, float 8s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes float {
    0%, 100% {
        transform: rotate(var(--initial-rotate)) translate(var(--initial-translate));
    }
    50% {
        transform: rotate(calc(var(--initial-rotate) + 5deg)) 
                  translate(calc(var(--initial-translate-x) + 5px),
                          calc(var(--initial-translate-y) + 5px));
    }
}

• 每张图片有不同的初始旋转和位置

• 使用CSS变量(--initial-rotate等)控制初始状态

• 浮动动画使图片轻微摇摆

• 淡入动画实现渐进显示

3. 悬停放大效果

图片悬停时有放大和提升效果：

.stacked-image:hover {
    transform: scale(1.15) rotate(0deg) translate(20px, -20px) !important;
    z-index: 30 !important;
    filter: drop-shadow(0 10px 35px rgba(0, 0, 0, 0.4));
}

• 放大1.15倍

• 取消旋转角度

• 轻微上移

• 增加阴影增强立体感

响应式设计

针对不同屏幕尺寸调整布局：

@media (max-width: 768px) {
    .image-stack {
        width: 80vw;
        height: 80vh;
    }
}

@media (max-width: 480px) {
    .image-stack {
        width: 90vw;
        height: 90vh;
    }
}

其他特色

这个设计结合了现代CSS动画效果和响应式布局，适合动漫类网站的视觉展示需求。仅供学习使用

1. 毛玻璃效果导航栏：

   .ar {
       backdrop-filter: blur(5px);
   }

3. 自定义滚动条样式：

   html {
       scrollbar-color: #ee858c #926453;
       scrollbar-width: thin;
   }

4. 圆形视频播放区域：

   div.ar3 video {
       border-radius: 50%;
   }

   完整代码展示

5. HTNML

6. 
   
   
   
       
       
       
       
       
   
   
   
       
   
           
   
               
   
                   
               
               
   
                   
   
                       
   
                           
   
                               最新消息   News
   
                           
                           
                       
                       
   
                           
   
                                放送时间   Onar
                           
                           
                       
                       
   
                           
   
                                引言   Introoduction
                           
                           
                       
                       
   
                           
   
                                故事   Story
                           
                           
                       
                       
   
                           
   
                                分集情报   Episode
                           
                           
                       
                       
   
                           
   
                                角色介绍   Character
                           
                           
                       
                       
   
                           
   
                                制作&配音   Staff&Cast
                           
                           
                       
                       
   
                           
   
                               音乐   Music
                           
                           
                       
                       
   
                           
   
                               影片   Movie
                           
                           
                       
                       
   
                           
   
                               同人   Bu-ray.Box
                           
                           
                       
                       
   
                           
   
                                商品   Goods
                           
                           
                       
                       
   
                           
   
                                特典   Special
                           
                           
                       
                       
   
                           
   
                               漫画   Comics
                           
                           
                       
                       
   
                           
   
                                首页   Top
                           
                           
                       
                   
               
               
   
                   
                   
               
           
   
           
   
               
   
                   
                   
                   
                   
                   
                   
                   
                   
               
           
       
   
       
   
   
   

   css部分

7. html {
       scrollbar-color: #ee858c #926453;
       scrollbar-width: thin;
   }
   
   /* 基础样式 */
   .fullscreen-background {
       /* 固定背景图 */
       background-attachment: fixed;
       display: flex;
       top: 0;
       left: 0;
       width: 100%;
       height: 250vh;
       object-fit: contain;
       background-image: url(img/visual_bg.webp);
       z-index: -1;
       overflow: hidden;
   }
   
   /* 基础样式 */
   body {
       margin: 0;
       padding: 0;
       font-family: 'Arial', sans-serif;
   }
   
   .ar2 li p {
       position: relative;
       z-index: 2;
       transition: all 0.3s ease;
   }
   
   .ar2 li::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
       z-index: 1;
   }
   
   /* 蓝色框的悬停效果 */
   .ar2 li:nth-child(2n)::before {
       background-color: #45bbff;
   }
   
   /* 粉色框的悬停效果 */
   .ar2 li:nth-child(2n-1)::before {
       background-color: #ee858c;
   }
   
   /* 悬停时填充效果 */
   .ar2 li:hover::before {
       left: 0;
   }
   
   /* 悬停时文字颜色变化 */
   .ar2 li:nth-child(2n):hover p {
       color: white !important;
   }
   
   .ar2 li:nth-child(2n-1):hover p {
       color: white !important;
   }
   
   .ar {
       width: 250px;
       height: 250vh;
       /* 创建毛玻璃效果 */
       backdrop-filter: blur(5px);
       box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
       z-index: 10;
       transition: all 0.3s ease;
   }
   
   .ar1 {
       width: 450px;
       height: 80px;
       background-color: #fff;
       border-radius: 50px;
       margin: 20px 0;
       margin-left: -40px;
   }
   
   .ar1 img {
       box-sizing: border-box;
       padding-left: 70px;
       width: 400px;
       height: 90px;
       object-fit: contain;
   }
   
   .ar2 li {
       list-style: none;
       border-radius: 30px;
       margin: 30px;
       margin-left: -70px;
       width: 320px;
       height: 50px;
       background-color: aqua;
       background-color: transparent;
       position: relative;
       transition: all 0.3s ease;
   }
   
   .ar2 li:nth-child(2n) {
       border: 4px solid #45bbff;
       color: #45bbff;
       background-color: #fff;
       box-shadow: 3px 3px #45bbff;
       box-sizing: border-box;
       padding-left: 50px;
       line-height: 10px;
       font-size: 18px;
   }
   
   .ar2 li:nth-child(2n-1) {
       border: 4px solid #ee858c;
       color: #ee858c;
       background-color: #fff;
       box-shadow: 3px 3px #ee858c;
       box-sizing: border-box;
       padding-left: 50px;
       line-height: 10px;
       font-size: 18px;
   }
   
   div.ar2 img {
       margin-left: 230px;
       margin-top: -20px;
   }
   
   div.ar3 {
       width: 300px;
       height: 300px;
       border-radius: 50%;
       position: absolute;
       left: 0;
       bottom: 0;
       margin-left: -50px;
       display: inline;
   }
   
   div.ar3 img {
       position: relative;
       left: 202px;
       top: -6px;
       transform: rotate(-6deg);
   }
   
   div.ar3 video {
       width: 300px;
       height: 300px;
       object-fit: cover;
       border-radius: 50%;
       position: relative;
       top: -160px;
   }
   
   
   
   /* 去除 a 标签默认样式 */
   .ar2 li p a {
       text-decoration: none;
       color: inherit;
       display: block;
       width: 100%;
       height: 100%;
   }

   网站效果如图