У меня есть анимация css -doodle, которая представляет собой небольшой анимированный кружок, который я хотел бы использовать в качестве замены буквы "O" в заголовке моего сайта (h1.) Поэтому анимация должна находиться на той же строке, что и мой заголовок, с текстом заголовка на каждой стороне от него (например: "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>