设置 CLOUDFLARE 自定义页面

前言

I’m Under Attack Mode™ Challenge 是CF的一种人家验证,众人称5秒盾。它可以阻挡一些机器人,不过默认的造型不太友好,好在我们有自定义的选项。

操作

好,现在我们开始实战操演,先进入客户区,进入设置页面。

找到 I’m Under Attack Mode™ Challenge

然后点开,进入设置页面。

这里分享一个模板,感谢Aiden

https://doc.cukee.cc/cloudflare/cf-uam/dist/index.html

HTML代码如下

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - CF UAM</title>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Animated Loader</title>
    </head><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body>
  <header>
    <h2>Checking Ur Browser</h2>
  </header>
  <div class="bg-frame">
    <div class="square-first"></div>
    <div class="square-second"></div>
    <div class="square-third"></div>
  </div>
</body>
<!-- ::IM_UNDER_ATTACK_BOX:: -->
  <div style="display:none;">::IM_UNDER_ATTACK_BOX::</div>
</body>
</html>

保存为 index.html

CSS代码如下

@import url("https://fonts.cukee.cc/css2?family=Major+Mono+Display&display=swap");

/* global */
:root {
  --curve: cubic-bezier(0.2, 1, 0.6, 1);
}

body {
  background-image: radial-gradient(
    circle farthest-corner at 10% 20%,
    rgba(28, 38, 47, 1) 0%,
    rgba(37, 47, 57, 1) 90%
  );
}

h2 {
  font-family: "Major Mono Display", monospace;
  font-size: 5em;
  color: #fffee4;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  h2 {
    display:none;
  }
}

/* frame */
.bg-frame {
  width: 400px;
  height: 400px;
  background-color: #fffee4;
  border-radius: 50%;
  box-shadow: 0 10px 20px #fffee4;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* squares */
.square-first {
  width: 96px;
  height: 96px;
  background-color: #46466e;
  border-radius: 35px;
  position: relative;
  top: 152px;
  left: 152px;
  animation: first 4s var(--curve) 0s infinite alternate both;
}

.square-second {
  width: 64px;
  height: 64px;
  background-color: #a6ed8e;
  border-radius: 20px;
  position: absolute;
  top: 168px;
  left: 168px;
  animation: second 4s var(--curve) 0s infinite alternate both;
}

.square-third {
  width: 32px;
  height: 32px;
  background-color: #f2ffdf;
  border-radius: 11px;
  position: absolute;
  top: 184px;
  left: 184px;
  animation: third 4s var(--curve) 0s infinite alternate both;
}

/* keyframes */
@keyframes first {
  0% {
    transform: scale(0) rotate(0deg);
    box-shadow: 2px 2px 2px 2px hsla(0, 0%, 0%, 0);
  }
  20% {
    transform: scale(0) rotate(0deg);
    box-shadow: 2px 2px 2px 2px hsla(0, 0%, 0%, 0);
  }
  50% {
    transform: scale(1) rotate(360deg);
    box-shadow: 8px 8px 16px 0 hsla(0, 0%, 0%, 0.4);
  }
  100% {
    transform: scale(1) rotate(360deg);
    box-shadow: 8px 8px 16px 0 hsla(0, 0%, 0%, 0.4);
  }
}

@keyframes second {
  0% {
    transform: scale(0) rotate(0deg);
    box-shadow: 1px 1px 1px 1px hsla(0, 33%, 1%, 0.1);
  }
  30% {
    transform: scale(0) rotate(0deg);
    box-shadow: 1px 1px 1px 1px hsla(0, 0%, 0%, 0.1);
  }
  60% {
    transform: scale(1) rotate(-360deg);
    box-shadow: 4px 4px 8px 0 hsla(0, 0%, 0%, 0.4);
  }
  100% {
    transform: scale(1) rotate(-360deg);
    box-shadow: 4px 4px 8px 0 hsla(0, 0%, 0%, 0.4);
  }
}

@keyframes third {
  0% {
    transform: scale(0) rotate(0deg);
    box-shadow: 0.5px 0.5px 0.5px 0.5px hsla(0, 0%, 0%, 0.1);
  }
  40% {
    transform: scale(0) rotate(0deg);
    box-shadow: 0.5px 0.5px 0.5px 0.5px hsla(0, 0%, 0%, 0.1);
  }
  100% {
    transform: scale(1) rotate(360deg);
    box-shadow: 2px 2px 4px 0 hsla(0, 0%, 0%, 0.4);
  }
  100% {
    transform: scale(1) rotate(360deg);
    box-shadow: 2px 2px 4px 0 hsla(0, 0%, 0%, 0.4);
  }
}

保存为style.css

然后随便找个目录,比如我放网站目录里了,然后访问index.html

https://doc.cukee.cc/cloudflare/cf-uam/dist/index.html

好,不错

然后把地址填进去,可以预览一下什么的,没问题的话,Publish

留下评论