左右倾斜的背景效果

这篇教学会使用元素中不同的子元素，判断鼠标 hover 时所在的区间，进而透过渐层色或 clip-path 裁切路径的方式，产生有趣的左右倾斜背景动态效果。

快速导览：

• 判断 hover 位置改变背景色
• 使用渐层色产生左右倾斜背景效果
• 使用 clip-path 产生左右倾斜背景效果

判断 hover 位置

单纯依靠 CSS 无法直接判断鼠标位置，只能在需要判断的位置摆放元素，透过元素的位置感应出鼠标坐落在哪个区间，由于虚拟元素 ::before 和 ::after 不支援 :hover 选择器 ( 因为虚拟元素必须放在选择器最末端 )，所以必须使用实际元素进行判读，下方范例会建立左右两个 div 判读鼠标所在区间，并根据所在区间，改变第二个 div 的 ::before 背景色 ( 因为无法透过子元素控制父元素样式，所以使用子元素的虚拟元素作为背景 )。

参考：虚拟元素选择器 ( 伪元素 )、虚拟类别选择器 ( 类型位置 )

线上展示：https://codepen.io/oxxo/pen/qEBKxKz

<!-- HTML 程式碼 -->
<div class="b">
  <div></div>
  OXXO
  <div></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .b {
    position: relative;     /* 讓子元素定位 */
    box-sizing: border-box; /* 避免 padding 影響寬度 */
    width: max-content;     /* 根據最大內容寬度決定寬度 */
    border: 1px solid #000;
    margin: 50px;
    padding: 10px;
    font-size: 100px;
    line-height: 1;
  }
  .b div{
    position: absolute;     /* 子元素絕對定位 */
    width: 33.33%;          /* 寬度為父元素的 1/3 */
    height: 100%;           /* 高度等於父元素高度 */
    top: 0;                 /* 定位在上方 */
  }
  .b div:nth-of-type(1) {
    left: 0;                /* 第一個 div 定位在左側 */
    background: #f009;
  }
  .b div:nth-of-type(2) {
    right: 0;               /* 第一個 div 定位在右側 */
    background: #00f9;
  }

  .b div:nth-of-type(2)::before {
    position: absolute;     /* 子元素的虛擬元素絕對定位 */
    content: "";
    z-index: -1;
    width: 300%;            /* 因為元素寬度為父層的 1/3，所以改為 300% 才能填滿背景 */
    height: 100%;
    top: 0;
    left: -200%;            /* 因為元素定位在 2/3 處，所以往左移動 200% */
    background: #0c0;
    transition: .3s;
  }
  .b div:nth-of-type(1):hover ~ div:nth-of-type(2)::before{
    background: #f00;       /* 當第一個 div hover 時，改變同一層第二個 div 的虛擬元素背景 */
  }
  .b div:nth-of-type(2):hover::before{
    background: #00f;       /* 元素本身 hover 時改變虛擬元素背景 */
  }
</style>

使用渐层色产生左右倾斜背景效果

了解原理后，只需要将背景颜色改成“线性渐层”背景，搭配“自订属性 @property”改变渐层角度，就能实现左右倾斜的背景效果。

参考：@property 自订属性值、CSS 渐层色的转场与动画

线上展示：https://codepen.io/oxxo/pen/gbOKvjw

<!-- HTML 程式碼 -->
<div class="b">
  <div></div>
  OXXO
  <div></div>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 定義角度屬性 */
  @property --deg {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }
  .b {
    position: relative;
    box-sizing: border-box;
    width: max-content;
    border: 1px solid #000;
    margin: 50px;
    padding: 10px;
    font-size: 100px;
    line-height: 1;
  }
  .b div{
    position: absolute;
    width: 33.33%;
    height: 100%;
    top: 0;
  }
  .b div:nth-of-type(1) {left: 0;}
  .b div:nth-of-type(2) {right: 0;}

  .b div:nth-of-type(2)::before {
    position: absolute;
    content: "";
    z-index: -1;
    width: 300%;
    height: 100%;
    top: 0;
    left: -200%;
    background: linear-gradient(var(--deg), #f00 50%, #fff5 50%); /* 漸層背景 */
    transition: .3s, --deg .3s;  /* 轉場效果新增自訂屬性 --deg */
  }
  .b div:nth-of-type(1):hover ~ div:nth-of-type(2)::before{
    --deg: 10deg;        /* 當第一個 div hover 時，改變自訂屬性數值 */
  }
  .b div:nth-of-type(2):hover::before{
    --deg: -10deg;       /* 元素本身 hover 時，改變自訂屬性數值 */
  }
</style>

使用 clip-path 产生左右倾斜背景效果

除了使用渐层色，也可以运用 clip-path 裁切路径的方式，将下层元素裁切出左右倾斜的背景色，这种做法甚至可以实现双色文字的特殊效果，要使用这种做法必须将 HTML 程序码稍作修改，移除内容的文字，将文字改成属性的方式呈现，并透过 CSS 读取 HTML 属性，详细说明可参考下方范例的注解。

参考：裁切路径 clip-path、CSS 变数

线上展示：https://codepen.io/oxxo/pen/wBvXyxd

<!-- HTML 程式碼 -->
<div class="b" text="OXXO">
  <div></div>
  <div></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .b {
    --text: attr(text);     /* 取得屬性值 */
    --px: 50px;             /* 左右 padding 數值 */
    --py: 10px;             /* 上下 padding 數值 */
    position: relative;
    width: max-content;     /* 根據內容決定寬度 */
    border: 1px solid #000;
    margin: 50px;
    padding: var(--py) var(--px);      /* 根據變數值設定 padding */
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    font-size: 100px;
    line-height: 1;
  }
  .b::before {
    color: #000;
    content: var(--text);  /* 父元素的虛擬元素內容為變數 --text 內容 */
  }
  .b div{
    position: absolute;
    width: 33.33%;        /* 內容兩個 div 寬度是 1/3 */
    height: 100%;
    top: 0;
  }
  .b div:nth-of-type(1) {left: 0;}  /* 左邊 div */
  .b div:nth-of-type(2) {right: 0;} /* 右邊 div */

  .b div:nth-of-type(2)::before {
    position: absolute;
    z-index: 2;
    width: calc(300% - var(--px)*2);  /* 第二個 div 的虛擬元素寬度除了要放大 300%，還要減去 padding */
    height: calc(100% - var(--py)*2); /* 第二個 div 的虛擬元素高度要減去 padding */
    padding: var(--py) var(--px);     /* 設定 padding */
    content: var(--text);             /* 設定內容 */
    top: 0;
    left: -200%;                      /* 原本位於 2/3 位置，往左移動 200% */
    color: white;
    background: #06c;
    clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 50%); /* 裁切路徑，裁切出長方形 */
    transition: .3s;
  }
  .b div::before, .b div::after {
    pointer-events: none;             /* 讓使用者可以穿透廚發下層 hover */
  }
  .b div:nth-of-type(1):hover ~ div:nth-of-type(2)::before{
    clip-path: polygon(0 30%, 0 100%, 100% 100%, 100% 70%); /* 裁切路徑傾斜四邊形 */
  }
  .b div:nth-of-type(2):hover::before{
    clip-path: polygon(0 70%, 0 100%, 100% 100%, 100% 30%); /* 裁切路徑傾斜四邊形 */
  }
</style>

小结

虽然 CSS 无法像 JavaScript 可以准确获得鼠标的座标，但透过一些“旁门左道”，仍然可以做出判断鼠标所在区间的有趣效果。

意见反馈