时间戳

首页 > 解决方案 > css动画需要居中，不干扰首页布局

javascript - css动画需要居中，不干扰首页布局

问题描述

HTML CSS AND JAVASCRIPT in a nutshell
The code needs to be optimized so that it fits into a website above a contact form and text should be in the center without disturbing the wordpess website layout .Please help

<head>
  <meta charset="UTF-8">
  <title></title>

  <style>

  body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: helvetica, arial, sans-serif;
  font-size: 100px;
  font-weight: bold;
  letter-spacing: -0.4rem;
}

.break {
  display: flex;
  flex-wrap: wrap;
}

.mask {
  transform: rotate(0deg);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  animation: wobble 7s infinite;
}

@keyframes wobble {

 35% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }

}

.mask div {
  position: relative;
}



nav ul {
    display: flex;
}

nav li {
    display: block;
}

nav a {
    padding: 20px;
    text-decoration: none;
    background-color: lemonchiffon;
    margin-right: 1px;
}



  </style>


</head>

<body>

  <div class="break">
GET IN TOUCH
</div>



    <script>

    const col_count = 20;

let txt = document.querySelector(".break"),
    w = txt.getBoundingClientRect().width,
    h = txt.getBoundingClientRect().height,
    chunk_size = Math.ceil(w/col_count),
    row_count = Math.ceil(h/chunk_size);

txt.style.width = chunk_size*col_count+"px";

let html = `<div class='mask'><div>${txt.innerHTML}</div></div>`;
txt.innerHTML = "";

for(let i=0; i<row_count; i++) {
  for(let j=0; j<col_count; j++) {
    txt.innerHTML += html;
    let index = j+i*col_count;
  }
}

let masks = document.querySelectorAll(".mask");
let inMasks = document.querySelectorAll(".mask div");

for(let i=0; i<row_count; i++) {
    for(let j=0; j<col_count; j++) {
        let index = j+i*col_count;
        masks[index].style.width = chunk_size+"px";
        masks[index].style.height = chunk_size+"px";
        masks[index].style.overflow = "hidden";
        masks[index].style.animationDelay = `${index*20}ms`;
        inMasks[index].style.left = -j*(chunk_size) + "px";
        inMasks[index].style.top = -i*(chunk_size) + "px";
    }
}

    </script>




</body>

</html>

代码取自链接 - https://codepen.io/punishyourmachine/pen/pQZMZa?page=4

要求~

1.需要居中
2.代码需要插入到联系我们表格上方以展示它。
3.Plz 也改变颜色
4.你可以通过这个或去 codepen 编辑器更正代码

标签： javascripthtmlcsswordpress

解决方案

编辑 .break 类如下

.break {
  display: flex;
  flex-wrap: wrap;
  margin:0 auto;   /* center */
  color:#F95300;   /* color  */
}

推荐阅读