html - 火腿图标交叉图标仅使用 CSS

Question

我正在尝试使用 hack 仅使用纯 CSS 将“火腿菜单”图标更改为“关闭”图标。请检查代码:

.ham
{
	height: 30px;
	padding: 15px 20px;
}
.dsp-none
{
  display:none;
}
.cross
{
  display:none;
  height: 30px;
	padding: 15px 20px;	
}
.ham-icon:checked .cross
{
	display: block;
}

<input id="click" type="checkbox" name="menu" class="ham-icon dsp-none"/><label for="click" class="ham-lnk"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" class="ham tr-fl"><rect x="12" y="20" width="40" height="2"/><rect x="12" y="32" width="40" height="2"/><rect x="12" y="44" width="40" height="2"/></svg>
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="611.979px" height="611.979px" viewBox="0 0 611.979 611.979" class="cross"><g><path d="M356.781,305.982L601.453,61.311c14.033-14.033,14.033-36.771,0-50.774c-14.004-14.033-36.741-14.033-50.774,0
              L306.007,255.208L61.277,10.536c-14.004-14.033-36.771-14.033-50.774,0c-14.004,14.004-14.004,36.742,0,50.774l244.701,244.672
              L10.503,550.684c-14.004,14.004-14.004,36.771,0,50.774c7.016,7.017,16.216,10.51,25.387,10.51c9.2,0,18.371-3.493,25.387-10.51
              l244.701-244.701l244.671,244.701c7.017,7.017,16.217,10.51,25.388,10.51c9.199,0,18.399-3.493,25.387-10.51
              c14.033-14.033,14.033-36.771,0-50.774L356.781,305.982z"/></g></svg></label>

我无法获得想要的结果。 单击时，它应更改为十字图标。没有动画或过渡使用。谁能提出解决此问题的方法？

Answer 1

不确定为什么要为此使用 SVG，只需使用一些 HTML 和一些 CSS 即可。

示例的 CSS 中有一条注释:

/* Try different values here: .25rem, .5rem, .2rem, 5rem, 10rem... */
transform-origin: 5rem center;

我个人喜欢 5rem 的效果，但您可能更喜欢 .25rem 到 2rem 之间的效果。

代码如下:

const button = document.getElementById('button');
const icon =  document.getElementById('icon');

button.onclick = () => icon.classList.toggle('close');

#button {
  position: relative;
  width: 4rem;
  height: 4rem;
  background: #000;
  cursor: pointer;
}

#button:hover {
  background: rgb(0, 100, 100);
}

#icon {
  position: absolute;
  top: 0;
  right: 1rem;
  left: 1rem;
  width: auto;
  height: 100%;
}

/* MENU ICON */

.lines,
.lines:before,
.lines:after {
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  background: #FFFFFF;
  transition: 0.3s;
}

.lines {
  height: 3px;
  margin-top: -2px;
  top: 50%;
}

.lines:before,
.lines:after {
  content: '';
  height: 100%;

  /* Try different values here: .25rem, .5rem, .2rem, 5rem, 10rem... */
  transform-origin: 5rem center;
}

.lines:before {
  top: 8px;
}

.lines:after {
  top: -8px;
}

/* CLOSE ICON */

.close {
  transform: scale3d(0.8, 0.8, 0.8);
}

.close .lines {
	background: transparent;
}

.close .lines:before,
.close .lines:after {
  top: 0;
  transform-origin: 50% 50%;
}

.close .lines:before {
  transform: rotate3d(0, 0, 1, 45deg);
}

.close .lines:after {
  transform: rotate3d(0, 0, 1, -45deg);
}

<div id="button">
  <div id="icon">
    <span class="lines"></span>
  </div>
</div>

无论如何，如果您只需要修复您的，主要问题是 CSS 选择器(或 HTML 结构)错误。例如，您有这个选择器:

.ham-icon:checked .cross

但在您的原始 HTML 中，.cross 不是 .ham-icon 的后代。

我稍微更改了 HTML 的结构、CSS 选择器并调整了十字图标 SVG:

.hidden {
  display: none;
}

/* DEFULT: Menu icon shown, close icon hidden */

#menu-icon {
  height: 30px;
  padding: 15px 20px;
}

#close-icon {
  display:none;
  height: 30px;
  padding: 15px 20px;	
}

/* CHECKED: Menu icon hidden, close icon shown */

#checkbox:checked + #menu-icon {
  display: none;
}

#checkbox:checked ~ #close-icon {
  display: block;
}

<label>

  <input id="checkbox" type="checkbox" name="menu" class="hidden"/>

  <svg id="menu-icon"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 64 64"
    enable-background="new 0 0 64 64"
    xml:space="preserve">
    
    <rect x="12" y="20" width="40" height="2"/>
    <rect x="12" y="32" width="40" height="2"/>
    <rect x="12" y="44" width="40" height="2"/>
  </svg>

  <svg id="close-icon"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="-100 -100 800 800">
  
    <g><path d="M356.781,305.982L601.453,61.311c14.033-14.033,14.033-36.771,0-50.774c-14.004-14.033-36.741-14.033-50.774,0L306.007,255.208L61.277,10.536c-14.004-14.033-36.771-14.033-50.774,0c-14.004,14.004-14.004,36.742,0,50.774l244.701,244.672L10.503,550.684c-14.004,14.004-14.004,36.771,0,50.774c7.016,7.017,16.216,10.51,25.387,10.51c9.2,0,18.371-3.493,25.387-10.51l244.701-244.701l244.671,244.701c7.017,7.017,16.217,10.51,25.388,10.51c9.199,0,18.399-3.493,25.387-10.51
c14.033-14.033,14.033-36.771,0-50.774L356.781,305.982z"/></g>
</svg>
              
</label>