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