css实现绚丽滚动边框效果-html代码-BFW代码库

代码语言：html
代码描述：css实现绚丽滚动边框效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
}

html, body, .bg {
  height: 100%;
}

html {
  background-color: white;
  padding: 1vmin;
}

body {
  border: 2vmin solid black;
  border-radius: 5vmin;
  padding: calc(2vmin + 10px);
  margin: 0;
}

.fal.fa-hand-paper:not(*:root) {
  padding-top: 0.051em;
}

.far.fa-dot-circle:not(*:root) {
  padding-top: 0.060625em;
}

.fas.fa-circle:not(*:root) {
  padding-top: 0.0675em;
}

.fas.fa-eye:not(*:root) {
  padding-top: 0.05em;
}

.fas.fa-hand-paper:not(*:root) {
  padding-top: 0.05em;
}

.fas.fa-map-marker:not(*:root) {
  padding-top: 0.055em;
}

.fas.fa-sparkles:not(*:root) {
  padding-top: 0.067em;
}

.bg {
  background-color: black;
  background-image: radial-gradient(circle, white 1vmin, transparent 1.1vmin, transparent 8vmin), radial-gradient(circle, white 0.8vmin, transparent 0.9vmin, transparent 10vmin), radial-gradient(circle, white 0.5vmin, transparent 0.51vmin, transparent 3vmin);
  background-position: 20px 50px, -10px -10px, 50px -55px;
  background-size: 150px 200px;
  display: -webkit-box;
  display: flex;
  position: relative;
}

.border-bottom {
  bottom: -10px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.border-left {
  bottom: -20px;
  left: -10px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
.border-right {
  bottom: 0;
  right: 10.1px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.border-top {
  top: -10px;
}
.border-bottom, .border-top {
  width: calc(100vw - 10vmin - 20px);
}
.border-left, .border-right {
  width: calc(100vh - 10vmin - 20px);
}
.border-bottom, .border-left, .border-right, .border-top {
  -webkit-animation: wavy 0.5s linear infinite;
          animation: wavy 0.5s linear infinite;
  background-repeat: repeat-x;
  background-size: 20px 20px, 40px 20px;
  background-image: radial-gradient(circle at center -5px, transparent 12px, black 13.5px), radial-gradient(circle at 10px 15px, black 15px, transparent 16.5px);
  height: 20px;
  position: absolute;
}
.border-bottom::before, .border-left::before, .border-right::before, .border-top::before {
  background-color: black;
  border-radius: 15px;
  content: '';
  height: 30px;
  left: -10px;
  position: absolute;
  top: 0;
  width: 30px;
}

.drop {
  color: red;
  font-size: 20vmin;
  height: 20.4vmin;
  position: absolute;
  -webkit-text-stroke: 2px black;
  -webkit-transform: scale(0.75) scaleY(1.33);
          transform: scale(0.75) scaleY(1.33);
  width: 15.3vmin;
}
.drop:first-child {
  right: 2vmin;
  top: 0;
  -webkit-transform: rotate(45deg) scale(0.75) scaleY(1.33);
          transform: rotate(45deg) scale(0.75) scaleY(1.33);
}
.drop:nth-child(2) {
  right: 3vmin;
  top: 50%;
  -webkit-transform: rotate(90deg) translateX(-50%) scale(0.75) scaleY(1.33);
          transform: rotate(90deg) translateX(-50%) scale(0.75) scaleY(1.33);
}
.drop:nth-child(3) {
  right: 0;
  top: 100%;
  -webkit-transform: rotate(135deg) translateX(-82%) translateY(82%) scale(0.75) scaleY(1.33);
          transform: rotate(135deg) translateX(-82%) translateY(82%) scale(0.75) scaleY(1.33);
}
.drop:nth-child(4) {
  left: 0;
  top: 100%;
  -webkit-transform: rotate(-135deg) translateX(82%) translateY(82%) scale(0.75) scaleY(1.33);
          transform: rotate(-135deg) translateX(82%) translateY(82%) scale(0.75) scaleY(1.33);
}
.drop:nth-child(5) {
  left: 3vmin;
  top: 50%;
  -webkit-transform: rotate(-90deg) translateX(50%) scale(0.75) scaleY(1.33);
          transform: rotate(-90deg) translateX(50%) scale(0.75) scaleY(1.33);
}
.drop:last-child {
  left: 2vmin;
  top: 0;
  -webkit-transform: rotate(-45deg) scale(0.75) scaleY(1.33);
          transform: rotate(-45deg) scale(0.75) scaleY(1.33);
}
.drop:nth-child(1) {
  color: #ff8f57;
}
.drop:nth-child(2) {
  color: #c7ff57;
}
.drop:nth-child(3) {
  color: #57ff8f;
}
.drop:nth-child(4) {
  color: #57c7ff;
}
.drop:nth-child(5) {
  color: #8f57ff;
}
.drop:nth-child(6) {
  color: #ff57c7;
}

.eye {
  background-position: 0.2vmin 0;
  bottom: 6vmin;
  font-size: 20vmin;
  height: 15.35vmin;
  position: absolute;
  right: 7vmin;
  text-align: center;
  width: 23vmin;
}
.eye::before {
  position: relative;
  top: -2.5vmin;
}
.eye:not(*:root)::before {
  display: block;
  margin-top: -2.5vmin;
  position: static;
}

.eye-fill {
  bottom: 7vmin;
  color: white;
  font-size: 14vmin;
  height: 14vmin;
  position: absolute;
  right: 11vmin;
  width: 14vmin;
}
.eye-fill:not(*:root) {
  padding-top: 0.8vmin;
}

.hamsa {
  -webkit-animation: bounce 1s infinite linear alternate;
          animation: bounce 1s infinite linear alternate;
  height: 51vmin;
  margin: auto;
  position: relative;
  width: 45vmin;
}

.hand {
  font-size: 50vmin;
  height: 1.008em;
  left: 0.014em;
  position: relative;
  -webkit-transform: scaleX(0.9);
          transform: scaleX(0.9);
  width: 0.884em;
}

.hand-outline {
  -webkit-animation: scroll 30s linear infinite;
          animation: scroll 30s linear infinite;
  bottom: 0;
  font-size: 51vmin;
  height: 1.0058823529em;
  position: absolute;
  right: 0;
  width: 0.8823529412em;
}

.iris {
  -webkit-animation: iris 5s linear infinite;
          animation: iris 5s linear infinite;
  bottom: 9.6vmin;
  font-size: 8vmin;
  height: 8.07vmin;
  position: absolute;
  right: 14.1vmin;
  width: 8.07vmin;
}
.iris::before {
  position: relative;
  left: -0.12vmin;
  top: -0.14vmin;
}

.nail {
  color: white;
  position: absolute;
  font-size: 3vmin;
}
.nail-middle {
  left: 22vmin;
  top: 4.7vmin;
}
.nail-pinky {
  right: 4.25vmin;
  top: 16.2vmin;
}
.nail-pointer {
  left: 14.2vmin;
  top: 8.4vmin;
}
.nail-ring {
  left: 29.75vmin;
  top: 8.2vmin;
}
.nail-thumb {
  left: 5vmin;
  top: 28vmin;
}

.pupil-outline {
  bottom: 5.7vmin;
  font-size: 16vmin;
  height: 15.8vmin;
  position: absolute;
  right: 10.2vmin;
  width: 15.8vmin;
}
.pupil-outline::before {
  left: -0.25vmin;
  position: relative;
  top: -0.25vmin;
}

.sparkle {
  color: white;
  -webkit-filter: drop-shadow(0 0 1vmin black) drop-shadow(0 0 1vmin black) drop-shadow(0 0 1vmin black);
          filter: drop-shadow(0 0 1vmin black) drop-shadow(0 0 1vmin black) drop-shadow(0 0 1vmin black);
  font-size: 15vmin;
  height: 6vmin;
  left: 25%;
  overflow: hidden;
  position: absolute;
  -webkit-text-stroke: 1px black;
  top: 25%;
  -webkit-transform: scaleX(-1) scale(2);
          transform: scaleX(-1) scale(2);
  width: 6vmin;
}
.sparkle + .sparkle:not(.sparkle-sm) {
  left: auto;
  right: 20%;
  top: 75%;
}
.sparkle-sm {
  left: 30%;
  top: 70%;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.sparkle-sm + .sparkle-sm {
  left: auto;
  right: 27%;
  top: 25%;
}
.sparkle::before {
  position: relative;
  right: 9.4vmin;
}

body {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff57c7), color-stop(#ff8f57), color-stop(#c7ff57), color-stop(#57ff8f), color-stop(#57c7ff), color-stop(#8f57ff), color-stop(#ff57c7), color-stop(#ff57c7), color-stop(#ff8f57), color-stop(#c7ff57), color-stop(#57ff8f), color-stop(#57c7ff), color-stop(#8f57ff), to(#ff57c7));
  background-image: linear-gradient(#ff57c7, #ff8f57, #c7ff57, #57ff8f, #57c7ff, #8f57ff, #ff57c7, #ff57c7, #ff8f57, #c7ff57, #57ff8f, #57c7ff, #8f57ff, #ff57c7);
  background-image: conic-gradient(#ff57c7, #ff8f57, #c7ff57, #57ff8f, #57c7ff, #8f57ff, #ff57c7, #ff57c7, #ff8f57, #c7ff57, #57ff8f, #57c7ff, #8f57ff, #ff57c7);
}

.cutout {
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.gradient {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#ff57c7), color-stop(#ff8f57), color-stop(#c7ff57), color-stop(#57ff8f), color-stop(#57c7ff), color-stop(#8f57ff), to(#ff57c7));
  background-image: linear-gradient(to top, #ff57c7, #ff8f57, #c7ff57, #57ff8f, #57c7ff, #8f57ff, #ff57c7);
  background-size: 100% 600%;
  background-position: 0 0;
}
.gradient-radial {
  -webkit-animation: radial 1s linear infinite;
          animation: radial 1s linear infinite;
  background-image: repeating-radial-gradient(circle at center 8.9vmin, #ff57c7 0%, #ff57c7 8.3333333333%, #ff8f57 8.3333333333%, #ff8f57 16.6666666667%, #c7ff57 16.6666666667%, #c7ff57 25%, #57ff8f 25%, #57ff8f 33.3333333333%, #57c7ff 33.3333333333%, #57c7ff 41.6666666667%, #8f57ff 41.6666666667%, #8f57ff 50%);
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(-2.5vmin);
            transform: translateY(-2.5vmin);
  }
  to {
    -webkit-transform: translateY(2.5vmin);
            transform: translateY(2.5vmin);
  }
}

@keyframes bounce {
  from {
    -webkit-transform: translateY(-2.5vmin);
            transform: translateY(-2.5vmin);
  }
  to {
    -webkit-transform: translateY(2.5vmin);
            transform: translateY(2.5vmin);
  }
}
@-webkit-keyframes iris {
  0% {
    color: #ff57c7;
  }
  16.6666666667% {
    color: #8f57ff;
  }
  33.3333333333% {
    color: #57c7ff;
  }
  50% {
    color: #57ff8f;
  }
  66.6666666667% {
    color: #c7ff57;
  }
  83.3333333333% {
    color: #ff8f57;
  }
  100% {
    color: #ff57c7;
  }
}
@keyframes iris {
  0% {
    color: #ff57c7;
  }
  16.6666666667% {
    color: #8f57ff;
  }
  33.3333333333% {
    color: #57c7f.........完整代码请登录后点击上方下载按钮下载查看