HTML+CSS 炫酷悬停网页动态特效含源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
      }
      .card {
        position: relative;
        width: 220px;
        height: 320px;
        background: mediumturquoise;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        font-weight: bold;
        border-radius: 15px;
        cursor: pointer;
      }

      .card::before,
      .card::after {
        position: absolute;
        content: "";
        width: 20%;
        height: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        font-weight: bold;
        background-color: lightblue;
        transition: all 0.5s;
      }

      .card::before {
        top: 0;
        right: 0;
        border-radius: 0 15px 0 100%;
      }

      .card::after {
        bottom: 0;
        left: 0;
        border-radius: 0 100% 0 15px;
      }

      .card:hover::before,
      .card:hover:after {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        transition: all 0.5s;
      }

      .card:hover:after {
        content: "HELLO";
      }
</style>
  </head>
  <body>
    /* From Uiverse.io by eslam-hany */
    <div class="card">HOVER</div>
  </body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END