首先我想承認(rèn)我的標(biāo)題很令人困惑，對(duì)此感到抱歉。我想要實(shí)現(xiàn)的是懸停時(shí)的以下效果：
我的網(wǎng)站在這裡 https://wordpress-493302-3130963.cloudwaysapps.com/
我已經(jīng)成功地使用 css 轉(zhuǎn)換完成了我想要實(shí)現(xiàn)的目標(biāo)的一半，但無法看到創(chuàng)建按鈕的影子副本，如上圖所示。我的CSS如下
.cta-button-menu:hover {
transform:rotateZ(45deg) !important;
background: #21B6CD !important;
color: white !important;
transition: 1s;
}
如果這可以使用 JS 或其他也可以實(shí)現(xiàn)的東西來實(shí)現(xiàn)，但 CSS 是首選。
不包含從大型選單外掛程式產(chǎn)生的 html，但如果需要可以這樣做。
2
0
0
我建議製作 2 個(gè)按鈕/一個(gè)標(biāo)籤：
body {
padding: 4em;
background-color: black;
}
.button {
position: relative;
}
.firstButton,
.secondButton {
position: absolute;
display: inline-block;
padding: 1em;
text-align: center;
color: white;
text-decoration: none;
border: 1px solid white;
}
.firstButton {
visibility: hidden;
}
.button:hover .firstButton {
transform: rotateZ(45deg);
background: #E83054;
visibility: visible;
}
.button:hover .secondButton {
transform: rotateZ(-45deg);
background: #21B6CD;
}
您可以使用 ::before 來套用此效果。
.wrapper{
height:300px;
background-color:gray;
}
.btn, .btn::before{
font-size:2rem;
color:white;
width:200px;
height:70px;
border:2px solid white;
transition:all 0.3s linear;
display:flex;
justify-content:center;
align-items:center;
}
.btn{
position:relative;
top:30%;
left:30%;
background-color:transparent;
}
.btn:hover {
background-color:#21b6cd;
transform: rotateZ(45deg);
border:none;
}
.btn::before {
content:"Book Now";
background-color:transparent;
position:absolute;
}
.btn:hover::before{
transform: rotateZ(-90deg);
background-color:#e72f54;
border:none;
}
