Ham图标仅使用CSS交叉图标

Question

我试图使用一个黑客来改变“火腿菜单”图标为“关闭”图标点击仅使用纯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>

​

Answer 2

我在W3Schools上看到过这样的例子。而不是更改图标/使用显示:无属性使用动画。

下面是W3schools示例