zoukankan      html  css  js  c++  java
  • css3 动画 -- 旋转线条 rotate_line

    1.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Border Animation</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
      </head>
      <body>
        <div class="box"></div>
      </body>
    </html>

    2.css

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #111;
    }
    .box {
       200px;
      height: 200px;
      background: url(./avatar.jpg) no-repeat center;
      background-size: cover;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .box::before,
    .box::after {
      content: "";
      border: 2px solid #2ecc71;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: -15px;
      /* clip: rect(top, right, bottom, left); */
      animation: borderClip 8s linear infinite;
    }
    .box::after {
      animation-delay: -4s;
    }
    .box:hover::before,
    .box:hover::after {
      animation-play-state: paused;
    }
    @keyframes borderClip {
      0%,
      100% {
        clip: rect(0px, 230px, 2px, 0px);
      }
      25% {
        clip: rect(0px, 2px, 230px, 0px);
      }
      50% {
        clip: rect(228px, 230px, 230px, 0px);
      }
      75% {
        clip: rect(0px, 230px, 230px, 228px);
      }
    }

    3.效果图

  • 相关阅读:
    GIt如何进行代码管理
    GIt如何安装使用
    selenium+xpath在不同层级的写法
    Java+Selenium 常见问题QA
    Java+Selenium如何解决空指针
    python 发邮件
    用apscheduler写python定时脚本
    http断点续传的原理
    好的代码是重构出来的
    python写excel总结
  • 原文地址:https://www.cnblogs.com/crazycode2/p/13563445.html
Copyright © 2011-2022 走看看