Widget:mpbutton
<style> .mpbutton {
display: inline-block; position: relative; width: 150px; height: 150px; overflow: hidden; margin: 2px; background-color: #343434; transition: 0.5s;
}
.mpbutton-icon {
position: absolute; width: 96px; height: 96px; left: 27px; top: 16px; overflow: hidden; background: url(https://static.prts.wiki/Mpbuttons.4DCFB205.png); filter: drop-shadow(0px 18px 6px rgba(255, 255, 255, 0.5));
}
.mpbutton-label {
position: absolute; width: 100%; bottom: 20px; font-size: 15px; color: white; text-align: center; font-weight: 900; font-family: "微软雅黑", sans-serif; letter-spacing: 2px; transition: 0.5s;
}
.mpbutton-mask {
position: absolute; left: 0; top: 0; width: 150px; height: 150px;
}
.mpbutton:hover {
background-color: var(--additon-title);
}
.mpbutton:hover .mpbutton-label.zh, .mpbutton-label.en {
opacity: 0;
}
.mpbutton:hover .mpbutton-label.en, .mpbutton-label.zh {
opacity: 1;
}
- mpbutton-container {
max-width: 100%; overflow: hidden;
}
- mpbutton-scaler {
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; position: relative; left: 50%; transform-origin: top left; transform: translateX(-50%); width: 920px;
} </style> <script> document.addEventListener('DOMContentLoaded',function(){
var containerClass = document.querySelector("body").classList.contains("skin-minerva") ? ".nodesktop" : ".nomobile"
var container = document.querySelector(containerClass + ' #mpbutton-container');
var scaler = document.querySelector(containerClass + ' #mpbutton-scaler');
var containerWidth = container.offsetWidth
if (containerWidth<920) {
scaler.style.transform = 'scale(' + (containerWidth / 920) + ')';
scaler.style.left = 0;
container.style.height = (308 * containerWidth / 920) + 'px';
// $('#mpbutton-scaler').css({ // 'transform': 'scale(' + (containerWidth / 920) + ')', // 'left': '0' // }); // $('#mpbutton-container').css('height', (308 * containerWidth / 920) + 'px');
}
}); </script>