扣子平台首页动画：逐帧讲解辉光卡片的实现过程

2023-10-01 12:30:24

辉光卡片的实现

扣子平台首页动画的辉光卡片是由一个div元素和一个svg元素组成的。div元素负责卡片的布局和定位，而svg元素则负责辉光效果的呈现。

div元素

<div class="card">
  <div class="card-header">
    <h1>扣子平台</h1>
  </div>
  <div class="card-body">
    <p>扣子平台是一个即刻开发新一代AI Chat Bot的应用编辑平台，可以通过这个平台快速创建各种类型的Chat Bot。</p>
  </div>
</div>

svg元素

<svg class="card-glow">
  <defs>
    <filter id="glow">
      <feGaussianBlur stdDeviation="10" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M0 0 h100 v100 h-100 z" filter="url(#glow)"/>
</svg>

代码实现

辉光卡片的代码实现非常简单，只需要在div元素上添加一个css类名，并为svg元素添加一个filter属性即可。

.card {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.card-header {
  background-color: #000;
  color: #fff;
  padding: 10px;
}

.card-body {
  padding: 10px;
}

.card-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 120px;
  height: 120px;
  filter: url(#glow);
}