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

css实现绚丽滚动边框效果

代码语言：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).........完整代码请登录后点击上方下载按钮下载查看