1

我有一个 css-doodle 动画，它基本上是一个小的动画圆圈，我想用它来代替我的网站标题（h1）中的字母“O”。因此，动画需要在同一行作为我的标题，每边都有标题文本（例如：“PURPLE XM[css-doodle]SS”）。我还想在标题周围放置一个虚线边框，并确保即使在更改页面宽度时仍能显示 css-doodle 动画。我的 HTML 和 CSS 样式表如下：

.divheader {
  display: inline-block;
  position: static;
  height: 200px;
  width: 700px;
  border: 2px dashed #000000;
}

p {
  display: inline-block;
  position: static;
  background-color: white;
  font-size: 38px;
  font-color: white;
  font-family: "Courier New", Courier, monospace;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0000;
}
<html lang="en">

<head>

  <link href="doodletest.css" type="text/css" rel="stylesheet" />
  <script src="https://unpkg.com/css-doodle@0.7.7/css-doodle.min.js">
  </script>
</head>
<title>purple x moss</title>
<div class="divheader">
  <p>PURPLE x M
    <css-doodle> :doodle { @grid: 40x1 / 40vmin; perspective: 23vmin; } background: @multi(@r(220, 40), ( radial-gradient( @p(#00b8a9, #5f4f93, #8d7ebd, #b1a7d1) 55%, transparent 60% ) @r(100%) @r(100%) / @r(1%, 3%, .1) @lr() no-repeat )); @size: 80%; @place-cell:
      center; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 20s linear infinite; animation-delay: calc(@i() * -.6s); @keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% {
      transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }
    </css-doodle>SS</p>
</div>

4

0 回答 0