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));
.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 + 电竞耳机
-
所有参与者均可获得限定版纪念皮肤及网吧充值卡
参与方式
- 组建你的五人队伍
- 前往指定合作网吧登记
- 提交队员信息完成报名
- 缴纳¥100/队参赛保证金*
*保证金将在全程参与后退还
比赛规则
- 每队必须由5名选手组成
- 禁止任何形式的作弊行为
- 迟到超过15分钟视为弃权
- 尊重对手，文明竞赛
准备好了吗？
名额有限，立即组队报名！
© 2023 峡谷集结号组委会 | 本活动最终解释权归主办方所有
咨询电话：400-xxx-xxxx | 邮箱：
功能亮点
1. 沉浸式的电竞体验
2. 清晰的布局结构
3. 响应式设计
该页面充分展现了电竞赛事的紧张刺激感，同时保持了信息的清晰传达，让潜在参与者能够轻松了解活动详情并快速决定是否参与。
