CSS背景图循环滚动

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  --text-color: hsl(0 95% 60%);
  --bg-color: hsl(0 0% 100%);
  --bg-size: 200px;

display: grid;
  place-items: center;
  place-content: center;
  grid-template-areas: "body";
  overflow: hidden;
  font-family: "Dela Gothic One", sans-serif;
  background-color: var(--bg-color);
}

body::before {
  --size: 150vmax;

grid-area: body;
  content: "";
  inline-size: var(--size);
  block-size: var(--size);
  background-image: url("https://www.jq22.com/newjs/foot-pattern.svg");
  background-size: var(--bg-size);
  background-repeat: repeat;
  transform: rotate(45deg);
  opacity: 0.25;
  animation: bg 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation-duration: 0s;
  }
}

@keyframes bg {
  to {
    background-position: 0 calc(var(--bg-size) * -1);
  }
}

.text {
  grid-area: body;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: clamp(1rem, 10vmin, 6rem);
}

.heading span {
  display: block;
  text-transform: uppercase;
}

.heading span.filled {
  color: var(--text-color);
}

.heading span:not(.filled) {
  --stroke: min(0.25vmin, 2px) var(--text-color);
  color: var(--bg-color);
  -webkit-text-stroke: var(--stroke);
  text-stroke: var(--stroke);
}

.subheading {
  position: relative;
  margin-block-start: 1rem;
  margin-inline-start: auto;
  font-size: 0.428em;
  color: var(--text-color);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg