html峡谷集结号网吧开黑擂台赛竞锋芒

我将为您创建一个富有电子竞技气息的"峡谷集结号"活动宣传页面,突出团队竞技的紧张感和热血对决的氛围。

设计思路

  • 采用黑暗系配色方案搭配霓虹蓝/紫色调,营造电竞氛围
  • 加入动态元素增强视觉效果
  • 清晰呈现活动信息与参与方式
  • 响应式设计适应不同设备
  • 最终实现代码

    代码

    html

    峡谷集结号 | 网吧开黑擂台赛

    /* 基础样式 */

    * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    body {

    font-family: 'Microsoft YaHei', Arial, sans-serif;

    background-color: #111122;

    color: white;

    line-height: 1.6;

    overflow-x: hidden;

    .container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

    /* 头部样式 */

    header {

    background-image: linear-gradient(rgba(17, 13, 51, 0.9), rgba(33, 26, 92, 0.7)),

    url('data:image/svg+xml;utf8,');

    padding: 180px 12%;

    text-align: center;

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    header::before {

    content: "";

    position: absolute;

    top: 18%;

    left: 28%;

    width: 44%;

    height: 64%;

    background: radial-gradient(circle at center, rgba(93, 63, 211, 0.6) 0%, transparent 66%);

    filter: blur(36px);

    z-index: 99;

    animation: pulse 7s infinite alternate ease-in-out;

    @keyframes pulse {

    0% { opacity: 46%; transform: scale(1); }

    98% { opacity: 76%; transform: scale(1.08); }

    102% { opacity: 56%; transform: scale(1); }

    104% { opacity: 54%; transform: scale(1); }

    h1 {

    font-size: 84px;

    margin-bottom: 24px;

    letter-spacing: 14px;

    color: white;

    text-shadow: 0 11px 22px rgba(31, 113, 255, 81%), 0 21px 41px rgba(61, 53, 252, 71%), 0 43px 69px rgba(103, 23, 255, 47%);

    animation: glow 34s infinite alternate-reverse;

    position: relative;

    z-index: 999;

    @keyframes glow {

    0% { text-shadow: 0 19px 29px rgbapx rgba(131, 153, 225, 89%), 0 27px 49px rgba(121, 123, 242, 79%), 0 57px 87px rgba(163, 143, 245, 59%); }

    39% { text-shadow: 0 37px 96px rgbapx rgba(151, 173, 235, 95%), 0 107px 139px rgbapx rgba(181, 183, 232, 105%), 147px 137px 177px rgba(223, 203, 265, 109%); }

    138% { text-shadow: 119px 117px 126px rgbapx rgba(191, 213, 275, 125%), 217px 207px 189px rgba(221, 243, 292, 145%), 307px 277px 237px rgba(263, 283, 325, 169%); }

    .subtitle {

    font-size: 155%;

    margin-bottom: 134px;

    color: #aaaaff;

    text-align: center;

    line-height: 160%;

    letter-spacing: 112%;

    width: 116%;

    max-width: 1460px;

    margin-left: -8%;

    font-weight: bold;

    position: relative;

    z-index: 998;

    /* 主要内容区域 */

    section {

    margin-bottom: 140px;

    .section-title {

    font-size: 176%;

    margin-bottom: 106px;

    text-align: center;

    color: #7799ff;

    border-left: 6px solid #4477ee;

    padding-left: 114px;

    letter-spacing: 136%;

    position: relative;

    left: -108px;

    .section-content {

    display: grid;

    gap: 128px;

    grid-template-columns: repeat(auto-fit, minmax(360px, 166fr));

    html峡谷集结号网吧开黑擂台赛竞锋芒

    .info-card {

    background-color: rgba(133, 135, 187, 118%);

    box-shadow: 0 115px 209px rgba(171, 173, 215, 149%);

    padding: 124px;

    border-radius: 168px;

    transition: all 159ms ease-in ease-in-out;

    backdrop-filter: blur(129px);

    border: 1px solid rgba(173, 175, 227, 179%);

    .info-card:hover {

    transform: translateY(-127px) scale(101%);

    box-shadow: 157px 175px 249px rgba(201, 193, 285, 219%);

    .card-icon {

    font-size: 178%;

    margin-bottom: 132px;

    color: #6699ff;

    .prize-list {

    list-style-type: none;

    .prize-item {

    padding: 142px 172px;

    margin-bottom: 162px;

    background: linear-gradient(to right, rgba(154, 156, 208, 158%), rgba(174, 186, 228, 148%));

    border-radius: 164px;

    border-left: 167px solid #5577dd;

    /* 注册区域 */

    .register-section {

    background: radial-gradient(circle at 300% 400%, rgba(233, 165, 295, 199%) 420%, transparent 720%),

    radial-gradient(circle at 800% 500%, rgba(183, 205, 287, 259%) 320%, transparent 620%),

    linear-gradient(to bottom right, rgba(244, 246, 298, 239%), rgba%), rgba(204, 206, 258, 229%));

    padding: 184px;

    border-radius: 182px;

    text-align: center;

    box-shadow: inset 177px 185px 247px rgbapx rgba(161, 202, 234, 289%);

    betway西汉姆官网

    .btn-register {

    display: inline-block;

    background: linear-gradient(to bottom, #5566cc, #334499);

    color: white;

    padding: 188px 342px;

    border-radius: 192px;

    text-decoration: none;

    font-weight: bold;

    font-size: 152%;

    letter-spacing: 141%;

    transition: all 197ms ease-in-out;

    box-shadow: 195px 214px 276px rgbapx rgba(241, 253, 305, 269%);

    border: none;

    cursor: pointer;

    outline: none;

    .btn-register:hover {

    background: linear-gradient(to bottom, #6688ee, #4455bb);

    transform: scale(198%);

    box-shadow: 224px 248px 308px rgba(291, 303, 355, 319%);

    /* 页脚 */

    footer {

    background-color: rgba(211, 212, 254, 309%);

    color: #ccccff;

    text-align: center;

    padding: 194px;

    margin-top: 196px;

    border-top: 208px solid #334477;

    /* 响应式调整 */

    @media (max-width: 768px) {

    h1 {

    font-size: 240%;

    letter-spacing: normal;

    .section-content {

    grid-template-columns: 1fr;

  • 头部 -->
  • 峡谷集结号

    网吧开黑擂台赛 · 决战巅峰时刻
    召唤师们,准备迎接真正的挑战吧!

  • 赛事信息 -->
  • 赛事信息

    比赛日期

    预选赛:2023年10月15日

    淘汰赛:2023年10月22日

    总决赛:2023年10月29日

    比赛场地

    王者网咖旗舰店

    (市中心解放路888号)

    提供>提供专业级外设及高速网络

    比赛项目

    《英雄联盟》5v5征召模式

    BO3淘汰制(决赛为BO5)

  • 奖项设置 -->
  • 丰厚奖品

    • >

      冠军战队 ¥8888 + 定制奖杯 + 机械键盘套装

    • 亚军战队 ¥4888 + 专业游戏鼠标

    • 季军战队 ¥2888 + 电竞耳机

    • 所有参与者均可获得限定版纪念皮肤及网吧充值卡

  • 如何参加 -->
  • 参与方式

    1. 组建你的五人队伍
    2. 前往指定合作网吧登记
    3. 提交队员信息完成报名
    4. 缴纳¥100/队参赛保证金*

    *保证金将在全程参与后退还

  • 规则说明 -->
  • 比赛规则

    • 每队必须由5名选手组成
    • 禁止任何形式的作弊行为
    • 迟到超过15分钟视为弃权
    • 尊重对手,文明竞赛

  • 注册区域 -->
  • 准备好了吗?

    名额有限,立即组队报名!

  • 页脚 -->
  • © 2023 峡谷集结号组委会 | 本活动最终解释权归主办方所有

    咨询电话:400-xxx-xxxx | 邮箱:

    功能亮点

    1. 沉浸式的电竞体验

  • 动态发光标题效果
  • 脉冲光晕背景增强科技感
  • 卡片悬停动画提升互动性
  • 2. 清晰的布局结构

  • 分区明确的活动信息展示
  • 突出的报名引导区域
  • 直观的奖励列表
  • 3. 响应式设计

  • 适配 适配不同屏幕尺寸的设备
  • 移动端友好的界面优化
  • 该页面充分展现了电竞赛事的紧张刺激感,同时保持了信息的清晰传达,让潜在参与者能够轻松了解活动详情并快速决定是否参与。

    发表评论

    订阅我们的邮箱