我正在尝试将此按钮转换为响应式,但我不知道如何,我希望此 4 按钮显示仅在移动设备上垂直对齐。我没有找到解决此问题的任何网站:(。感谢您的所有回答!
.rainbow {
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
z-index: 1;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 7s ease infinite;
-z-animation: rainbow 7s ease infinite;
-o-animation: rainbow 7s ease infinite;
animation: rainbow 7s ease infinite;
mix-blend-mode: screen;
}
.bottoni {
float: center;
margin: 0 auto;
text-align: center;
margin-top: 7%;
}
.bottone {
display: inline-block;
position: relative;
padding-top: 17px;
text-align: center;
font-family: sans-serif;
width: 100% auto;
font-weight: bold;
margin-right: 20px;
margin-left: 20px;
text-transform: uppercase;
width: 200px;
height: 35px;
border: 3px solid black;
background: white;
transform: 1s;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-animation: bottoni 1s ease 0s 1 normal ;
animation: bottoni 1s ease 0s 1 normal ;
}
.bottone:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.bottone:hover, .bottone:focus, .bottone:active {
cursor: pointer;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.bottone:hover:before, .bottone:focus:before, .bottone:active:before {
opacity: 1;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
/* Animation */
@-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
<div class="bottoni">
<a class="bottone">
Votaci
<div class="rainbow"></div>
</a>
<a class="bottone">
forum
<div class="rainbow"></div>
</a>
<a class="bottone">
regolamento
<div class="rainbow"></div>
</a>
<a class="bottone">
shop
<div class="rainbow"></div>
</a>
</div>
感谢所有回答
最佳答案
您可以在 .bottoni
上使用移动设备上的绝对位置来使菜单垂直居中,以实现响应式使用 media queries :
@media (max-width: 480px) {
.bottoni {
top: 50%; /* adjust to your needs */
position: absolute;
left: 0;
right: 0;
}
}
关于html - 我怎样才能在响应中转换这个按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44565194/