Hyde Blog

主题

Hyde2025-03-06 02:49:532025-05-18 00:27:36VdoingCSS
737
3.7m
Get...

卡片边框线条动画 ​

Html 部分 ​

html
<div class="animated-border-box"></div>

Css 部分 ​

详细信息
css
<style>
    /* 清除浏览器默认 */
    /* 清除所有元素内外边距 */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* 更直观的盒模型计算方式 */
    }

    /* 清除列表样式 */
    ul,
    ol {
        list-style: none;
    }

    /* 清除默认超链接样式 */
    a {
        text-decoration: none;
        color: inherit;
    }

    /* 清除表单元素默认样式 */
    input,
    button,
    textarea,
    select {
        font: inherit;
        /* 继承父元素字体 */
        background: transparent;
        border: none;
        outline: none;
        appearance: none;
        /* 清除浏览器默认外观 */
    }

    /* 清除图片底部间隙 */
    img {
        vertical-align: middle;
    }

    /* 清除表格边框合并 */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* 清除文本级元素默认样式 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        font-size: inherit;
        font-weight: normal;
    }

    /* 清除 HTML5 新增元素默认样式 */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }

    /* 清除按钮默认样式 */
    button {
        cursor: pointer;
        user-select: none;
    }

    /* 禁用文本区域缩放 */
    textarea {
        resize: none;
    }

    /* 清除媒体元素基线对齐 */
    audio,
    video {
        vertical-align: baseline;
    }

    .animated-border-box {
        width: 300px;
        height: 150px;
        position: relative;
        margin: 2rem;
        background: pink;
        border-radius: 6px;
    }

    /* 动态边框线 */
    .animated-border-box::before,
    .animated-border-box::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        transition: all 0.3s;
    }

    .animated-border-box::before {
        top: 0;
        left: 0;
        border-top: 2px solid transparent;
        border-left: 2px solid transparent;
    }

    .animated-border-box::after {
        bottom: 0;
        right: 0;
        border-bottom: 2px solid transparent;
        border-right: 2px solid transparent;
    }

    .animated-border-box:hover::before {
        width: 100%;
        height: 100%;
        border-top-color: #67cdcc;
        border-left-color: #7ec699;
        border-radius: 2px;
    }

    .animated-border-box:hover::after {
        width: 100%;
        height: 100%;
        border-bottom-color: #466eff;
        border-right-color: #cc99cd;
        border-radius: 2px;
        transition-delay: 0.2s;
    }
</style>

完整代码 ​

详细信息
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 清除浏览器默认 */
    /* 清除所有元素内外边距 */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      /* 更直观的盒模型计算方式 */
    }

    /* 清除列表样式 */
    ul,
    ol {
      list-style: none;
    }

    /* 清除默认超链接样式 */
    a {
      text-decoration: none;
      color: inherit;
    }

    /* 清除表单元素默认样式 */
    input,
    button,
    textarea,
    select {
      font: inherit;
      /* 继承父元素字体 */
      background: transparent;
      border: none;
      outline: none;
      appearance: none;
      /* 清除浏览器默认外观 */
    }

    /* 清除图片底部间隙 */
    img {
      vertical-align: middle;
    }

    /* 清除表格边框合并 */
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    /* 清除文本级元素默认样式 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      font-size: inherit;
      font-weight: normal;
    }

    /* 清除 HTML5 新增元素默认样式 */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      display: block;
    }

    /* 清除按钮默认样式 */
    button {
      cursor: pointer;
      user-select: none;
    }

    /* 禁用文本区域缩放 */
    textarea {
      resize: none;
    }

    /* 清除媒体元素基线对齐 */
    audio,
    video {
      vertical-align: baseline;
    }

    .animated-border-box {
      width: 300px;
      height: 150px;
      position: relative;
      margin: 2rem;
      background: pink;
      border-radius: 6px;
    }

    /* 动态边框线 */
    .animated-border-box::before,
    .animated-border-box::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      transition: all 0.3s;
    }

    .animated-border-box::before {
      top: 0;
      left: 0;
      border-top: 2px solid transparent;
      border-left: 2px solid transparent;
    }

    .animated-border-box::after {
      bottom: 0;
      right: 0;
      border-bottom: 2px solid transparent;
      border-right: 2px solid transparent;
    }

    .animated-border-box:hover::before {
      width: 100%;
      height: 100%;
      border-top-color: #67cdcc;
      border-left-color: #7ec699;
      border-radius: 2px;
    }

    .animated-border-box:hover::after {
      width: 100%;
      height: 100%;
      border-bottom-color: #466eff;
      border-right-color: #cc99cd;
      border-radius: 2px;
      transition-delay: 0.2s;
    }
  </style>

  <body>
    <div class="animated-border-box"></div>
  </body>
</html>
最近更新