"

CSS发光边角效果，很炫酷，很实用

HTML代码如下：


<!DOCTYPE html>

<html>

  <head>

    <meta charset=""UTF-8"" />

    <title>CSS发光边角效果</title>

    <link rel=""stylesheet"" href=""style.css"" />

  </head>



  <body>

    <div class=""loader"" style=""--i: 1""></div>

    <div class=""loader"" style=""--i: 2""></div>

    <div class=""loader"" style=""--i: 3""></div>

    <div class=""loader"" style=""--i: 4""></div>

  </body>

</html>

CSS代码如下：


css

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  background: #222;

  gap: 40px;

}

.loader {

  position: relative;

  width: 150px;

  height: 150px;

  background: rgba(45, 45, 45, 1);

  overflow: hidden;

  transform: rotate(calc(90deg * var(--i)));

}

.loader::before {

  content: """";

  position: absolute;

  width: 300px;

  height: 300px;

  background: radial-gradient(#0ef, transparent, transparent);

  animation: animate 1.5s linear infinite;

}

.loader::after {

  content: """";

  position: absolute;

  inset: 2px;

  background: rgba(45, 45, 45, 0.9);

}

@keyframes animate {

  0% {

    transform: translate(-150px, -150px);

  }

  25% {

    transform: translate(0px, -150px);

  }

  50% {

    transform: translate(0px, 0px);

  }

  75% {

    transform: translate(-150px, 0px);

  }

  100% {

    transform: translate(-150px, -150px);

  }

}

标签: none

添加新评论