CodePen(1)-边框炫彩和模糊炫彩特效

边框炫彩和模糊炫彩特效#

每日的css特效学习，今天z-index的炫彩边框

设计思路-html#

• .place用于容器居中
• .outer用于提供炫彩变量
• .outer::after作为模糊炫彩层其z-index<1>
• .inner作为输入框其z-index<3>
• .border作为渲染边框z-index<2>

1
<div class="place">
2
    <div class="outer">
3
        <div class="inner">
4
            <input name="in" type="text" placeholder="询问YI AI" />
5
        </div>
6
        <div class="border"></div>
7
    </div>
8
</div>

css学习#

1. 首先利用houdini定义一个可用于animation的变量

   1
   @property --rotation {
   2
       syntax: "<angle>";
   3
       inherits: false;
   4
       initial-value: 0deg;
   5
   }

2. 然后外层容器实现居中效果

   1
   .place {
   2
       margin: auto;
   3
       display: flex;
   4
       align-items: center;
   5
       justify-content: center;
   6
       padding: 200px;
   7
   }

3. 里面输入框作为index<3把炫彩和模糊炫彩都挡住>

   1
   .inner {
   2
       background: light-dark(white, #1a1c1e);
   3
       color: light-dark(#222, hsl(210, 8%, 66%));
   4
       display: inline;
   5
       padding: 1rem 0.5rem;
   6
       position: relative;
   7
       z-index: 3; /* 这里最顶层，挡住炫彩 */
   8
       border-radius: inherit;
   9
       display: grid;
   10
       grid-template-columns: 400px; /* 提供高度撑开.outer父容器 */
   11
       align-items: center;
   12
       gap: 1rem;
   13
       font-family: system-ui;
   14
   }
   15
   
   16
   input {
   17
       color: light-dark(#222, hsl(210, 8%, 66%));
   18
       background: none;
   19
       border: none;
   20
   }
   21
   
   22
   input {
   23
       font-size: 1rem;
   24
       font-family: system-ui;
   25
       font-weight: 300;
   26
   
   27
       &:focus {
   28
           outline: none;
   29
       }
   30
   
   31
       &:not(:placeholder-shown) {
   32
           color: light-dark(black, white);
   33
       }
   34
   }

   展开折叠

4. 使用一个.border div元素作为背景炫彩

   1
   .border {
   2
       position: absolute;
   3
       /* 向外扩展4px，刚好将outer的边框覆盖 */
   4
       inset: calc(var(--border-size) * -1);
   5
       border-radius: inherit;
   6
       overflow: hidden;
   7
       background: var(--gradient);
   8
       z-index: 2;
   9
   }

5. 模糊炫彩使用.outer::after

   1
   .outer {
   2
       /* 声明边框大小，统一变量 */
   3
       --border-size: 4px;
   4
       /* 自定义houdini变量，实现旋转炫彩 */
   5
       --gradient: conic-gradient(
   6
           from var(--rotation) at 52% 49% in oklab,
   7
           oklch(0.63 0.2 251.22) 27%,
   8
           oklch(0.67 0.21 25.81) 33%,
   9
           oklch(0.9 0.19 93.93) 41%,
   10
           oklch(0.79 0.25 150.49) 49%,
   11
           oklch(0.63 0.2 251.22) 65%,
   12
           oklch(0.72 0.21 150.89) 93%,
   13
           oklch(0.63 0.2 251.22)
   14
       );
   15
       animation: rotate 5s infinite linear;
   16
       /* 声明外边框圆角 */
   17
       border-radius: 4rem;
   18
       background: none;
   19
       position: relative;
   20
       padding: 0;
   21
   
   22
       &::after {
   23
           content: "";
   24
           position: absolute;
   25
           inset: -4px; /* 大幅向外扩张，突破父级限制 */
   26
           background: var(--gradient);
   27
           filter: blur(15px); /* 强力模糊，对抗圆角吞噬 */
   28
           z-index: 1;
   29
           border-radius: inherit;
   30
       }
   31
   }

   展开折叠