1

I have a css-doodle animation which is basically a small, animated circle, which I would like to use as a replacement for the letter "O" in my website header (h1.) Therefore, the animation needs to be on the same line as my header, with header text on each side of it (ex: "PURPLE X M[css-doodle]SS"). I would also like to place a dashed border that wraps around the header, and ensure that the css-doodle animation still displays even when changing the width of the page. My HTML and CSS stylesheet are below:

.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>
Rob Moll
  • 3,345
  • 2
  • 9
  • 15
purplexmoss
  • 11
  • 2
  • A very, *very* fair warning: even if you use a Monospace font (don't!) replacing text and having it reliably appear where you want in all browsers and screen combinations will become a nightmare. I'm not saying it can't be done though this requires you to ask the most important developer question ever: are my clients paying for this? If you do go ahead (not trying to rain on your parade though experience and all) make it a reusable `.class` as you have. I recommend doing a lot of research on the topic and testing browser engines for consistency and especially mobile. Good luck either way! – John Mar 08 '20 at 03:30

0 Answers0