gpt4 book ai didi

css - 平行于 x 轴旋转按钮阴影

转载 作者:太空宇宙 更新时间:2023-11-04 01:13:30 25 4
gpt4 key购买 nike

我创建了一个动画旋转按钮,我希望它有一个平行于 x 轴的阴影。现在影子没有了,你知道怎么做吗?谢谢。这是现有按钮的 css 和带有“现场示例”的 codepan 的链接。

.btnMail{
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
box-shadow: 0 8px 6px -6px black;
}

https://codepen.io/hubkubas/pen/dmJjWB

最佳答案

根据对您问题的理解,您可以通过将 shadow-box 属性应用于伪元素来实现精美的 3D 外观阴影或自定义深度阴影,然后您可以进一步操作伪元素,以获得所需的阴影.

这是一个可能显示您想要的阴影类型的快速修复:

/* btn */

.btnMail{
width: 65px;
height: 60px;
display: inline-block;
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
}


.btnMail:hover {
transition: 0.30s;
transform: rotate(0deg);
box-shadow: 0px 8px 6px -6px black;
background-color: rgba(255, 0, 54, 0.8);
}

.btnMail:active {
box-shadow: 0 6px 6px -6px black;
transition: 0.30s;
}

#shadow{
z-index: -111;
width: 65px;
height: 50px;
position: absolute;
top: 17px;
left: 5px;
box-shadow: 0px 10px 16px -9px black;
}
<button class="btnMail shadow"><i class="fa fa-envelope"><a href="mailto:name@example.com"></a></i></button>
<div id="shadow">
</div>

(注意:我为阴影使用了单独的 div 标签,因为您在按钮上应用的动画也会应用在阴影上)。

您可以了解有关如何在此 link 上创建自定义阴影的更多信息.

关于css - 平行于 x 轴旋转按钮阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50715243/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com