东营码良软件开发
  • 首页
  • 产品与服务
    抖音软件
  • 开发案例
  • 新闻资讯
    二级菜单A
  • 关于我们
  • GEO 优化
  • Ai超市
咨询客服
企业咨询
会员中心
登录注册找回密码
东营码良软件开发
首页›
产品与服务›
开发案例›
新闻资讯›
二级菜单A›
关于我们›GEO 优化›Ai超市›
咨询客服会员中心
首页产品案例资讯我的
Dongying Maliang Software

码良软件开发

企业软件开发·微信小程序·网站建设·GEO 优化·AI 应用落地

咨询客服

导航

  • 首页
  • 产品与服务
  • 开发案例
  • 新闻资讯
  • 关于我们
  • GEO 优化
  • Ai超市

服务

  • 软件开发定制
  • GEO 搜索优化
  • 软件资源商城
  • 会员服务
  • 在线客服

行业方案

  • 零售门店
  • 教育培训
  • 医疗健康
  • 商务服务
  • 本地生活
  • 生产制造

联系

18865460927
山东省东营市垦利区兴隆路8-5号

扫码

码良软件开发 · 品牌入驻
品牌入驻手机端查看商城、案例与在线咨询

Copyright © 2014-2026 东营码良软件开发 Inc. 版权所有鲁ICP备2025202136号-2豫公网安备41019602002340经营许可证编号:豫B2-20190103
开发资讯 > 资讯详情

采用新拟态(Neumorphism)风格

2026-10-01 16:52:25阅读 1

采用新拟态(Neumorphism)风格

这是全新一版「新闻资讯」板块预览,采用新拟态(Neumorphism)风格,用双向柔和阴影代替边框和卡片,营造出从浅灰表面“凸起”的质感。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>首页「新闻资讯」板块 · 新风格预览 v8(新拟态)</title>
<style>
/* ============================================================
   「新闻资讯」板块 · 新拟态 Neumorphism(v8)
   对应线上:#news(.messageBox)
   设计思路:浅灰同色背景 + 双向柔和阴影
             凸起 = 卡片 / 按钮,凹陷 = 图片位 / 按下态
   ============================================================ */

:root {
  --nm-bg:      #e4e9f0;
  --nm-light:   #ffffff;
  --nm-dark:    #b8c2d0;
  --nm-dark-2:  #a3b1c6;
  --brand:      #ff6726;
  --ink:        #3d4a5c;
  --ink-2:      #5c6779;
  --ink-3:      #8a93a3;
  --ink-4:      #a8b0bc;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--nm-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 预览工具条(仅预览用) ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  padding: 14px 16px;
  background: var(--nm-bg);
  box-shadow: 0 6px 14px rgba(184,194,208,.55);
}
.toolbar .label { font-size: 12px; color: var(--ink-3); margin-right: 4px; }
.toolbar button {
  appearance: none; font-family: inherit; cursor: pointer;
  border: none; background: var(--nm-bg); color: var(--ink-2);
  font-size: 12px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px;
  box-shadow:
    4px 4px 8px var(--nm-dark),
    -4px -4px 8px var(--nm-light);
  transition: box-shadow .22s, color .22s;
}
.toolbar button:hover {
  color: var(--brand);
  box-shadow:
    2px 2px 5px var(--nm-dark),
    -2px -2px 5px var(--nm-light);
}
.toolbar button.on {
  color: var(--brand);
  box-shadow:
    inset 4px 4px 8px var(--nm-dark),
    inset -4px -4px 8px var(--nm-light);
}

/* ---------- 预览舞台 ---------- */
.stage {
  container-type: inline-size;
  width: 100%;
  margin: 0 auto;
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   1. 板块外壳
   ============================================================ */
#news.messageBox {
  background: var(--nm-bg);
  padding: 96px 24px 100px;
}

.newsShell {
  max-width: 1280px;
  margin: 0 auto;
}

/* ============================================================
   2. 顶部标题区
   ============================================================ */
.topBar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 52px;
}

.head { min-width: 0; }

.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .26em;
  color: var(--brand);
}
/* 凸起小胶囊 */
.kicker::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--nm-bg);
  box-shadow:
    3px 3px 6px var(--nm-dark),
    -3px -3px 6px var(--nm-light);
}

.title {
  margin: 20px 0 0;
  font-size: 44px; font-weight: 800;
  line-height: 1.12; letter-spacing: -0.03em;
  color: var(--ink);
}

.sub {
  margin: 14px 0 0;
  font-size: 15px; line-height: 1.7;
  color: var(--ink-3);
}

/* 凸起按钮,hover 时凹陷(按下感) */
.more {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--nm-bg);
  color: var(--brand);
  font-size: 14px; font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    7px 7px 14px var(--nm-dark),
    -7px -7px 14px var(--nm-light);
  transition: box-shadow .25s cubic-bezier(.22,.61,.36,1),
              transform .25s cubic-bezier(.22,.61,.36,1);
}
.more i {
  font-style: normal;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.more:hover {
  box-shadow:
    inset 6px 6px 12px var(--nm-dark),
    inset -6px -6px 12px var(--nm-light);
  transform: translateY(1px);
}
.more:hover i { transform: translateX(4px); }

/* ============================================================
   3. Bento Grid(新拟态凸起卡)
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 264px);
  gap: 26px;
}

/* 卡片:凸起 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nm-bg);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow:
    10px 10px 22px var(--nm-dark),
    -10px -10px 22px var(--nm-light);
  transition: box-shadow .35s cubic-bezier(.22,.61,.36,1),
              transform .35s cubic-bezier(.22,.61,.36,1);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow:
    15px 15px 30px var(--nm-dark),
    -13px -13px 28px var(--nm-light);
}

/* 图片位:凹陷(嵌入屏幕) */
.media {
  position: relative;
  flex: 0 0 auto;
  margin: 10px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--nm-bg);
}
.media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.card:hover .media img { transform: scale(1.05); }

/* 凹陷阴影覆盖层(图片会挡住父级 inset shadow,需要叠一层) */
.media::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 7px 7px 14px rgba(163,177,198,.60),
    inset -7px -7px 14px rgba(255,255,255,.85);
  pointer-events: none;
  z-index: 2;
}

/* 文字容器 */
.body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- 大卡(占 2×2) ---------- */
.card--hero {
  grid-column: span 2;
  grid-row: span 2;
}
.card--hero .media {
  flex: 0 0 52%;
  border-radius: 20px;
}
.card--hero .body {
  flex: 1;
  padding: 6px 28px 26px;
  justify-content: center;
}

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  color: var(--brand);
  background: var(--nm-bg);
  box-shadow:
    inset 3px 3px 6px var(--nm-dark),
    inset -3px -3px 6px var(--nm-light);
}
.tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(255,103,38,.7);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.72); }
}

.card--hero .titleH {
  margin: 16px 0 0;
  font-size: 24px; font-weight: 800;
  line-height: 1.44; letter-spacing: -0.015em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s;
}
.card--hero:hover .titleH { color: var(--brand); }

.card--hero .excerpt {
  margin: 10px 0 0;
  font-size: 14px; line-height: 1.7;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card--hero .meta {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-4);
  letter-spacing: .04em;
}

/* ---------- 小卡(占 1×1) ---------- */
.card--sm .media { flex: 0 0 54%; border-radius: 14px; }
.card--sm .body {
  flex: 1;
  padding: 4px 18px 18px;
  justify-content: space-between;
  gap: 10px;
}
.card--sm .titleH {
  margin: 0;
  font-size: 15px; font-weight: 700;
  line-height: 1.5; letter-spacing: -0.005em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s;
}
.card--sm:hover .titleH { color: var(--brand); }
.card--sm .meta {
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: .04em;
}

/* ---------- 宽卡(占 2×1,左图右文) ---------- */
.card--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: stretch;
}
.card--wide .media {
  flex: 0 0 38%;
  min-height: 0;
  margin: 10px 0 10px 10px;
  border-radius: 14px;
}
.card--wide .body {
  flex: 1;
  padding: 20px 24px;
  justify-content: center;
}
.card--wide .titleH {
  margin: 0;
  font-size: 17px; font-weight: 700;
  line-height: 1.5; letter-spacing: -0.005em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s;
}
.card--wide:hover .titleH { color: var(--brand); }
.card--wide .excerpt {
  margin: 8px 0 0;
  font-size: 13px; line-height: 1.65;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--wide .meta {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: .04em;
}

/* ============================================================
   4. 响应式(生产环境把 @container 换成 @media)
   ============================================================ */
@container (max-width: 1120px) {
  #news.messageBox { padding: 84px 24px 88px; }
  .title { font-size: 40px; }
  .bento {
    grid-template-rows: repeat(2, 244px);
    gap: 22px;
  }
  .card { border-radius: 22px; }
  .card--hero .body { padding: 6px 24px 22px; }
  .card--hero .titleH { font-size: 21px; margin-top: 14px; }
  .card--hero .excerpt { font-size: 13px; }
  .card--sm .body { padding: 4px 16px 16px; }
  .card--sm .titleH { font-size: 14px; }
  .card--wide .body { padding: 18px 20px; }
  .card--wide .titleH { font-size: 16px; }
}

@container (max-width: 880px) {
  #news.messageBox { padding: 64px 20px 68px; }
  .topBar { margin-bottom: 34px; }
  .title { font-size: 32px; }
  .sub { font-size: 14px; }
  .more { padding: 12px 22px; font-size: 13px; }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 20px;
  }
  .card--hero {
    grid-column: span 2;
    grid-row: auto;
    min-height: 420px;
  }
  .card--hero .media { flex: 0 0 auto; aspect-ratio: 16 / 9; }
  .card--hero .body { padding: 8px 22px 22px; }
  .card--hero .titleH { font-size: 20px; }

  .card--sm { min-height: 250px; }
  .card--sm .media { flex: 0 0 auto; aspect-ratio: 16 / 10; }

  .card--wide {
    grid-column: span 2;
    min-height: 200px;
  }
  .card--wide .media { flex: 0 0 34%; }
  .card--wide .body { padding: 18px 20px; }
  .card--wide .titleH { font-size: 16px; }
}

@container (max-width: 640px) {
  #news.messageBox { padding: 48px 16px 52px; }
  .topBar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
  }
  .title { font-size: 26px; margin-top: 14px; }
  .sub { font-size: 13px; margin-top: 10px; }
  .more { width: 100%; justify-content: center; padding: 13px 20px; }

  .bento {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .card--hero,
  .card--sm,
  .card--wide {
    grid-column: span 1 !important;
    min-height: 0;
    border-radius: 18px;
    flex-direction: column;
  }
  .card--hero .media,
  .card--sm .media,
  .card--wide .media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    width: auto;
    margin: 8px;
    border-radius: 12px;
  }
  .card--hero .body,
  .card--sm .body,
  .card--wide .body {
    flex: 1;
    padding: 4px 16px 16px;
    justify-content: flex-start;
  }
  .card--hero .titleH { font-size: 17px; margin-top: 10px; }
  .card--sm .titleH   { font-size: 15px; margin: 0; }
  .card--wide .titleH { font-size: 15px; }
  .card--hero .excerpt,
  .card--wide .excerpt { display: none; }
  .card--hero .meta,
  .card--sm .meta,
  .card--wide .meta { margin-top: 10px; font-size: 12px; }
  .tag { font-size: 10px; padding: 5px 11px; }
}

@container (max-width: 380px) {
  .title { font-size: 22px; }
  .card--hero .titleH { font-size: 16px; }
  .card--sm .titleH   { font-size: 14px; }
  .card--wide .titleH { font-size: 14px; }
}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 说明(预览用) ---------- */
.notes {
  max-width: 1280px;
  margin: 40px auto 80px;
  padding: 0 24px;
  font-size: 13px; line-height: 1.9; color: var(--ink-2);
}
.notes h4 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.notes ul { margin: 0; padding-left: 18px; }
.notes li { margin-bottom: 6px; }
.notes code {
  background: var(--nm-bg); padding: 2px 7px; border-radius: 6px;
  font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
  box-shadow: inset 2px 2px 4px var(--nm-dark), inset -2px -2px 4px var(--nm-light);
}
</style>
</head>
<body>

<!-- ============ 预览工具条 ============ -->
<div class="toolbar">
  <span class="label">预览宽度</span>
  <button data-w="auto" class="on">自适应</button>
  <button data-w="1440">1440</button>
  <button data-w="1280">1280</button>
  <button data-w="980">980</button>
  <button data-w="768">768</button>
  <button data-w="390">390</button>
</div>

<!-- ============ 预览舞台 ============ -->
<div class="stage" id="stage">

  <section class="messageBox" id="news">
    <div class="newsShell">

      <!-- 顶部标题区 -->
      <div class="topBar">
        <div class="head">
          <span class="kicker">NEWS</span>
          <h3 class="title">新闻资讯</h3>
          <p class="sub">4000+ 企业客户的共同选择</p>
        </div>
        <a class="more" href="/news">更多资讯 <i>→</i></a>
      </div>

      <!-- Bento Grid -->
      <div class="bento">

        <!-- 01 · 大卡(占 2×2) -->
        <a class="card card--hero" href="/shows/19/1001.html">
          <div class="media">
            <img
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaeef4'/%3E%3Cstop offset='1' stop-color='%23d6dce6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3Cg transform='translate(400 210)' fill='none' stroke='%239aa4b4' stroke-width='5'%3E%3Crect x='-80' y='-60' width='160' height='120' rx='14'/%3E%3Ccircle cx='-36' cy='-22' r='14'/%3E%3Cpath d='M-64 46 L-22 -2 L10 30 L40 -4 L76 46 Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ctext x='400' y='350' text-anchor='middle' font-family='sans-serif' font-size='22' font-weight='500' fill='%239aa4b4' letter-spacing='3'%3E暂无图片%3C/text%3E%3C/svg%3E"
              alt="暂无图片" loading="lazy" decoding="async" />
          </div>
          <div class="body">
            <span class="tag">最新动态</span>
            <h4 class="titleH">LovePS 发布 AI 智能助手 2.0:让企业服务响应速度提升 300%</h4>
            <p class="excerpt">支持多轮对话、知识库自动学习与工单智能分派,把平均响应时间从 8 分钟压缩到 90 秒以内。</p>
            <time class="meta" datetime="2026-10-01">2026 / 10 / 01</time>
          </div>
        </a>

        <!-- 02 · 小卡(占 1×1) -->
        <a class="card card--sm" href="/shows/19/1002.html">
          <div class="media">
            <img
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaeef4'/%3E%3Cstop offset='1' stop-color='%23d6dce6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='300' fill='url(%23g)'/%3E%3Cg transform='translate(200 128)' fill='none' stroke='%239aa4b4' stroke-width='4'%3E%3Crect x='-40' y='-30' width='80' height='60' rx='10'/%3E%3Ccircle cx='-18' cy='-10' r='7'/%3E%3Cpath d='M-32 22 L-12 0 L4 14 L18 -2 L34 22 Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ctext x='200' y='200' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%239aa4b4'%3E暂无图片%3C/text%3E%3C/svg%3E"
              alt="暂无图片" loading="lazy" decoding="async" />
          </div>
          <div class="body">
            <h4 class="titleH">Semrush 2026 全球 SEO 趋势报告:AI 搜索正在重塑流量结构</h4>
            <time class="meta" datetime="2026-09-30">2026 / 09 / 30</time>
          </div>
        </a>

        <!-- 03 · 小卡(占 1×1) -->
        <a class="card card--sm" href="/shows/19/1003.html">
          <div class="media">
            <img
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaeef4'/%3E%3Cstop offset='1' stop-color='%23d6dce6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='300' fill='url(%23g)'/%3E%3Cg transform='translate(200 128)' fill='none' stroke='%239aa4b4' stroke-width='4'%3E%3Crect x='-40' y='-30' width='80' height='60' rx='10'/%3E%3Ccircle cx='-18' cy='-10' r='7'/%3E%3Cpath d='M-32 22 L-12 0 L4 14 L18 -2 L34 22 Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ctext x='200' y='200' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%239aa4b4'%3E暂无图片%3C/text%3E%3C/svg%3E"
              alt="暂无图片" loading="lazy" decoding="async" />
          </div>
          <div class="body">
            <h4 class="titleH">企业数字化转型白皮书 2026:从流量思维到用户资产思维</h4>
            <time class="meta" datetime="2026-09-28">2026 / 09 / 28</time>
          </div>
        </a>

        <!-- 04 · 宽卡(占 2×1) -->
        <a class="card card--wide" href="/shows/19/1004.html">
          <div class="media">
            <img
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaeef4'/%3E%3Cstop offset='1' stop-color='%23d6dce6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='600' height='400' fill='url(%23g)'/%3E%3Cg transform='translate(300 180)' fill='none' stroke='%239aa4b4' stroke-width='4.5'%3E%3Crect x='-50' y='-38' width='100' height='76' rx='12'/%3E%3Ccircle cx='-22' cy='-14' r='9'/%3E%3Cpath d='M-40 30 L-14 -2 L6 18 L24 -4 L48 30 Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ctext x='300' y='278' text-anchor='middle' font-family='sans-serif' font-size='17' fill='%239aa4b4'%3E暂无图片%3C/text%3E%3C/svg%3E"
              alt="暂无图片" loading="lazy" decoding="async" />
          </div>
          <div class="body">
            <h4 class="titleH">网站速度优化实战:把 LCP 从 4.2s 降到 1.1s 的 7 个动作</h4>
            <p class="excerpt">不用重写前端,也不用换服务器。这 7 个动作按投入产出比排序,第 3 个几乎零成本。</p>
            <time class="meta" datetime="2026-09-25">2026 / 09 / 25</time>
          </div>
        </a>

      </div>

    </div>
  </section>

</div>

<!-- ============ 说明 ============ -->
<div class="notes">
  <h4>这一版改了什么</h4>
  <ul>
    <li><b>新拟态(Neumorphism)</b>:去掉所有边框和描边,改用双向柔和阴影——左上亮、右下暗——让卡片从浅灰表面上「凸起」。</li>
    <li><b>同色系</b>:背景、卡片、按钮统一使用 <code>#e4e9f0</code>,阴影亮色 <code>#ffffff</code>、暗色 <code>#b8c2d0</code>,营造「同一块材质被塑形」的观感。</li>
    <li><b>凸 / 凹两种语义</b>:
      <ul>
        <li><b>凸起</b>:卡片、按钮、NEWS 小圆点 —— 表示「可以看 / 可以点」;</li>
        <li><b>凹陷</b>:图片位、标签胶囊、按钮 hover —— 表示「嵌入的屏幕 / 已按下」。</li>
      </ul>
    </li>
    <li><b>图片位嵌入</b>:<code>.media</code> 用 <code>inset</code> 阴影做成凹槽,上面再叠一层 <code>::after</code> 覆盖层,让图片看起来像嵌进面板里。</li>
    <li><b>hover 反馈</b>:卡片 hover 时阴影变大 + 上移 3px(浮起感);按钮 hover 时反转为内凹(按下感)。</li>
    <li><b>Bento Grid 结构保留</b>:大卡 2×2、小卡 1×1、宽卡 2×1 的错落布局不变,只换视觉语言。</li>
    <li><b>与线上约束对齐</b>:<code>id="news"</code> 保留、仍在 <code>AboutNewsFooter</code> 内、<code>#about</code> 不受影响、CSS 依旧走 <code>legacy-home.css</code> 单一入口。</li>
  </ul>
</div>

<script>
  const stage = document.getElementById('stage');
  const buttons = document.querySelectorAll('.toolbar button[data-w]');
  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('on'));
      btn.classList.add('on');
      const w = btn.dataset.w;
      stage.style.width = (w === 'auto') ? '100%' : (w + 'px');
    });
  });
</script>

</body>
</html>
```
### 新拟态的核心:同色材质 + 双向阴影

这一版彻底去掉了边框和描边,改用新拟态最典型的“双向阴影”来塑造立体感。

**同一块材质,两种形态**

背景、卡片、按钮全部使用同一个浅灰 `#e4e9f0`,视觉上像同一块材质被压出了不同形状。凸起时左上亮、右下暗,凹陷时反过来——这个规则贯穿整个板块。

**凸起代表“可操作”**

卡片、按钮、“NEWS”前面的小圆点都是凸起的。卡片 hover 时阴影变大并上移 3px,形成浮起感;按钮 hover 时则反转为内凹,模拟被按下的动作。

**凹陷代表“嵌入”**

图片位是最关键的凹陷区域。`inset` 阴影让图片看起来像嵌在面板里的一块屏幕,而不是浮在上面的卡片。为了让内阴影在图片上方也能显示,额外加了一层 `::after` 覆盖层。

**标签也是凹陷的**

“最新动态”标签用内凹的小胶囊,和凸起的卡片形成对比。橙色小圆点在里面轻轻脉动,是新拟态里少见的一点动态。

**Bento Grid 结构保留**

大卡 2×2、小卡 1×1、宽卡 2×1 的错落布局没有变,只换视觉语言。这样内容节奏和上一版一致,但观感完全不同。
---

**优化建议:** 新拟态在浅色屏幕上效果最好,如果用户系统开启了深色模式,建议额外准备一套深色新拟态配色(背景 `#2a2f38`、亮阴影 `#353b47`、暗阴影 `#1e2229`),否则深色下阴影会几乎不可见。
DISCUSSION

评论

登录后参与
请使用网站前台用户账号登录后发表评论。

正在加载评论...


上一篇东营做去水印小程序多少钱?哪家开发公司靠谱下一篇111111

作者信息

超级管理
超级管理
等级作者
118文章
0点赞
0收藏
查看作者其他文章

文章展示

东营做去水印小程序多少钱?哪家开发公司靠谱东营做去水印小程序多少钱?哪家开发公司靠谱111111111111导航条样式源码导航条样式源码是不是Semrush 主要是获取 Google 上的可以发布外链的网站,如果我没有自己的网站是不是也可以发布文章图片等内容起到收录到google的作用是不是Semrush 主要是获取 Google 上的可以发布外链的网站,如果我没有自己的网站是不是也可以发布文章图片等内容起到收录到google的作用
把国内的网站外链发布到google国外,是不是可以把国内的网站外链发布到google国外,是不是可以

热门排行

网站接入支付功能完整教程1网站接入支付功能完整教程6 阅读会员推荐关系 + 新零售商城 数据库 ER + 字段设计文档2会员推荐关系 + 新零售商城 数据库 ER + 字段设计文档15 阅读GEO企业官网完整搭建实操方案(2026最新标准)3GEO企业官网完整搭建实操方案(2026最新标准)4 阅读发布内容至抖音H5场景完整申请&接入流程4发布内容至抖音H5场景完整申请&接入流程4 阅读团播动态灯牌MOV特效贴片定制5团播动态灯牌MOV特效贴片定制4 阅读东营母婴商城小程序开发6东营母婴商城小程序开发13 阅读