我只是想把中间的X图形替换为菜单切换器，用一些文本，比如Google，这是我在这里举的一个例子的公司名称。我甚至在标签中添加了一些文本，但它的格式不正确。我希望文本看起来像一个正常的句子，而不是一个接一个的单词。谢谢你提前帮我。
My Desired Output
body {
overflow: hidden;
background: linear-gradient(to right, #fc354c, #0abfbc);
}
.menu-toggler {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after {
background: white;
}
.menu-toggler:checked + label {
background: transparent;
}
.menu-toggler:checked + label:before, .menu-toggler:checked + label:after {
top: 0;
width: 40px;
transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
transform: rotate(45deg);
}
.menu-toggler:checked + label:after {
transform: rotate(-45deg);
}
.menu-toggler:checked ~ ul .menu-item {
opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item a {
pointer-events: auto;
}
.menu-toggler + label {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.menu-toggler + label:before, .menu-toggler + label:after {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
content: "";
position: absolute;
left: 0;
}
.menu-toggler + label:before {
top: 10px;
}
.menu-toggler + label:after {
top: -10px;
}
.menu-item:nth-child(1) a {
transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
transform: rotate(-60deg);
}
.menu-item:nth-child(3) a {
transform: rotate(-120deg);
}
.menu-item:nth-child(4) a {
transform: rotate(-180deg);
}
.menu-item:nth-child(5) a {
transform: rotate(-240deg);
}
.menu-item:nth-child(6) a {
transform: rotate(-300deg);
}
.menu-item {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 1050px;
height: 1025px;
display: block;
opacity: 0;
transition: 0.5s;
}
.menu-item a {
display: block;
width: 350px;
height: 120px;
font-family: Courgette;
line-height: 60px;
color: #000000;
background: #f2f9fe;
background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#f2f9fe), color-stop(100%,#d6f0fd));
background: -webkit-linear-gradient(top, #f2f9fe 5%,#d6f0fd 100%);
background: -o-linear-gradient(top, #f2f9fe 5%,#d6f0fd 100%);
background: -ms-linear-gradient(top, #f2f9fe 5%,#d6f0fd 100%);
background: linear-gradient(top, #f2f9fe 5%,#d6f0fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 );
margin: 120px auto 20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
text-align: center;
text-decoration: none;
font-size: 30px;
pointer-events: none;
transition: 0.2s;
}
.menu-item a:hover {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
color: cyan;
background: rgba(255, 255, 255, 0.3);
font-size: 34.4444444444px;
}
.menu-item a:after, .menu-item a:before {
content: '';
position: absolute;
z-indeX: -1;
background: white;
}
.menu-item a:after {
width: 100px;
height: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
top: -50px;
left: 50px;
}
.menu-item a:before {
width: 180px;
height: 180px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
top: -90px;
right: 50px;
}<body translate="no">
<nav class="menu">
<input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
<label for="menu-toggler">some text here</label>
<ul>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
</ul>
</nav>
</body>我还在做这个，现在我已经达到了X图标。
body {
overflow: hidden;
background: linear-gradient(to right, #fc354c, #0abfbc);
}
.menu-toggler {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after {
background: white;
}
.menu-toggler:checked + label {
background: transparent;
}
.menu-toggler:checked + label:before, .menu-toggler:checked + label:after {
top: 0;
width: 40px;
transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
transform: rotate(45deg);
}
.menu-toggler:checked + label:after {
transform: rotate(-45deg);
}
.menu-toggler:checked ~ ul .menu-item {
opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item a {
pointer-events: auto;
}
.menu-toggler + label {
width: 280px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
font-size: 38px;
}
.menu-toggler + label:before, .menu-toggler + label:after {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
content: "";
position: absolute;
left: 0;
}
.menu-toggler + label:before {
top: 10px;
}
.menu-toggler + label:after {
top: -10px;
}
.menu-item:nth-child(1) a {
transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
transform: rotate(-60deg);
}
.menu-item:nth-child(3) a {
transform: rotate(-120deg);
}
.menu-item:nth-child(4) a {
transform: rotate(-180deg);
}
.menu-item:nth-child(5) a {
transform: rotate(-240deg);
}
.menu-item:nth-child(6) a {
transform: rotate(-300deg);
}
.menu-item {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 1050px;
height: 1025px;
display: block;
opacity: 0;
transition: 0.5s;
}
.menu-item a {
display: block;
width: 350px;
height: 120px;
font-family: Courgette;
line-height: 60px;
color: #000000;
background: #f2f9fe;
background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#f2f9fe), color-stop(100%,#d6f0fd));
background: -webkit-linear-gradient(top, #f2f9fe 5%,#d6f0fd 100%);
background: -o-linear-gradient(top, #f2f9fe 5%,#d6f0fd 100%);
background: -ms-linear-gradient(top, #f2f9fe 5%,#d6f0fd 100%);
background: linear-gradient(top, #f2f9fe 5%,#d6f0fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 );
margin: 120px auto 20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
text-align: center;
text-decoration: none;
font-size: 30px;
pointer-events: none;
transition: 0.2s;
}
.menu-item a:hover {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
color: cyan;
background: rgba(255, 255, 255, 0.3);
font-size: 34.4444444444px;
}
.menu-item a:after, .menu-item a:before {
content: '';
position: absolute;
z-indeX: -1;
background: white;
}
.menu-item a:after {
width: 100px;
height: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
top: -50px;
left: 50px;
}
.menu-item a:before {
width: 180px;
height: 180px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
top: -90px;
right: 50px;
}<body translate="no">
<nav class="menu">
<input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
<label for="menu-toggler">some text here</label>
<ul>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
<li class="menu-item">
<a target="_blank">some text here</a>
</li>
</ul>
</nav>
</body>你可以试试这样
/* This is to make the cross hidden */
input#menu-toggler, label[for=menu-toggler]::before, label[for=menu-toggler]::after {
display: none;
}
/* This is to remove background from the label provided that you give an
id or something else to increase the specificity of the selector */
li#mi > a {
background-color: transparent;
}
HTML
<ul>
<!-- I have add an id to the first li item in the list -->
<li class="menu-item" id="mi">
<a target="_blank">some text here</a>
</li>