我需要帮助使用 CSS 为我的网站制作动画全屏按钮-解网

问：

我正在为我的网站制作一个动画按钮，将这样的图标转换为这样的图标并返回。目标是在两个州之间顺利进行防垃圾邮件过渡，其风格类似于我之前所做的这种过渡。

这是我目前所拥有的：

function toggleState(target) {
  target.classList.toggle("animate");
}

:root {
  --btn-size: min(8vh, 8vw);
  --bar-dimen: calc(var(--btn-size) * 0.225);
  --bar-thick: calc(var(--bar-dimen) * 0.5);
  --animation: 0.50s;
  --anim-half: calc(var(--animation) / 2);
  --anim-func: ease-in-out;
  --btn-color: black;
}

body {
  margin: 1%;
}

#fullscreen-btn {
  height: var(--btn-size);
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
  transition: rotate var(--animation) var(--anim-func);
}

#fullscreen-btn::before,
#fullscreen-btn::after,
#fullscreen-btn span::before,
#fullscreen-btn span::after {
  height: var(--bar-dimen);
  aspect-ratio: 1;
  position: absolute;
  border: var(--bar-thick) none var(--btn-color);
  transition: rotate var(--animation) var(--anim-func);
}

#fullscreen-btn::before {
  content: "";
  border-style: solid none none solid;
  top: 0;
  left: 0;
}

#fullscreen-btn::after {
  content: "";
  border-style: solid solid none none;
  top: 0;
  right: 0;
}

#fullscreen-btn span::before {
  content: "";
  border-style: none none solid solid;
  left: 0px;
  bottom: 0px;
}

#fullscreen-btn span::after {
  content: "";
  border-style: none solid solid none;
  right: 0px;
  bottom: 0px;
}

#fullscreen-btn.animate {
  rotate: 360deg;
}

#fullscreen-btn.animate::before,
#fullscreen-btn.animate::after,
#fullscreen-btn.animate span::before,
#fullscreen-btn.animate span::after {
  transition: rotate var(--animation) var(--anim-func);
  rotate: 180deg;
}

<div id="fullscreen-btn" onclick="toggleState(this)">
  <span></span>
</div>

首先，我有什么办法可以从中删除？其次，我能做些什么来优化我的代码，让它更漂亮、更整洁等？最后，有没有人有任何想法让动画更漂亮，在动画制作时更局限于内部，并且更符合菜单按钮？<span><div><div>

javascript html 动画 css-transitions

我需要帮助使用 CSS 为我的网站制作动画全屏按钮

I need help making an animated full screen button for my website using CSS

评论