javascript - 在 HTML CSS JAVASCRIPT 中创建洋甘菊

问题描述

我想制作洋甘菊花，我有这样的花纸

以及创建类似 3 的内容

谁能帮我？我创建了这段代码

<div class="flower-center" style="width: 139.169px; height: 139.169px; top: 125.333px; left: 262.927px;"><img src="{% static 'css/covers/4/center.png' %}" alt="Серцевина цветка"></div>
                    <div class="petal1" style="">
                        <img class="petal" onclick="oneClick(this)" src="{% static 'css/covers/4/petal1.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal2" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal3" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal4" style="">
                        <img class="petal" onclick="oneClick(this)" src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal5" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal6" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal7" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal8" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal9" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal10" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal11" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal12" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal13" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal14" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal15" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal16" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal17" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal18" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal19" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal20" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal21" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal22" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal23" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal24" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal25" style="">
                        <img class="petal" onclick="oneClick(this)" src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal26" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal27" style="">
                        <img class="petal" onclick="oneClick(this)" src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal28" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal29" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal30" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                </div>
                <button onclick="location.reload();" style="display: none; position:absolute;bottom:20px;left:0;right:0;margin:auto;" class="view-shetavseba">კიდევ სცადე&lt;/button>
            </div>
        </div>
    </div>

但它看起来很像

如何创建这个或任何人有类似的例子？我想在洋甘菊上占卜，有我需要的星座网站。谢谢，如果有人帮助我，我可以在我找到它的地方显示完整的工作代码。

标签： javascripthtmljquerycssfrontend

解决方案

定位前 2 个图像后，重置变换值的单个循环应该执行以下操作：

let ptl = document.querySelectorAll("img:not(.center)");
let rot = 360 / ptl.length;
let rdm = 3;
let text = document.querySelector("#text");
let words = ["yes", "perhaps", "no"]

function resize() {
  let scale = document.body.offsetHeight / 650;
  document.body.style.transform = "scale(" + scale + ")"
}
for (let i = 0; i < ptl.length; i++) {
  ptl[i].addEventListener("click", function() {
    this.style.opacity = "0";
    this.style.pointerEvents = "none";
    let x = Math.floor(Math.random() * words.length);
    text.innerHTML = words[x];
  });
  ptl[i].style.transform = "rotate(" + i * rdm * rot + "deg)";
}

window.onresize = resize;
window.onload = resize();

body {
  background: linear-gradient(0, #5eba7d, #0077cc, #e1b604);
  height: 100vh;
}

div {
  display: grid;
  height: 100vh;
  align-items: center;
  justify-content: center;
  position: relative;
}

#text {
  position: relative;
}

img,
#text {
  grid-row: 1;
  grid-column: 1;
  margin: auto;
}

img:not(.center) {
  padding-right: 375px;
  clip-path: polygon(0% 100%, 0% 0%, 40% 0%, 40% 100%);
}

img:hover {
  filter: brightness(105%);
}

<div>
  <b id=text>pick a petal</b>
  <img src="https://i.stack.imgur.com/coLCe.png" class="center">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
</div>

笔玩：https ://codepen.io/gc-nomade/pen/PozLqLe

javascript - 在 HTML CSS JAVASCRIPT 中创建洋甘菊

问题描述

解决方案

推荐阅读