这篇文章将为大家详细讲解有关使用纯CSS怎么实现带有金属光泽的立体按钮的动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、网页空间、营销软件、网站建设、莫力达网站维护、网站推广。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges/tree/master/004-metallic-glossy-3d-button-effects
代码解读在 dom 中定义一个容器:
BUTTON
容器居中显示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: skyblue; }
设置按钮的 2d 样式,为了便于调整按钮尺寸,使用了变量:
.box { background: linear-gradient(to right, gold, darkorange); color: white; --width: 250px; --height: calc(var(--width) / 3); width: var(--width); height: var(--height); text-align: center; line-height: var(--height); font-size: calc(var(--height) / 2.5); font-family: sans-serif; letter-spacing: 0.2em; border: 1px solid darkgoldenrod; border-radius: 2em; }
设置按钮的 3d 样式:
.box { transform: perspective(500px) rotateY(-15deg); text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2); box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2); }
定义按钮的鼠标划过动画效果:
.box:hover { transform: perspective(500px) rotateY(15deg); text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2); box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2); } .box { transition: 0.5s; }
用伪元素增加光泽:
.box { position: relative; } .box::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(to right, transparent, white, transparent); left: 0; }
定义光泽动画效果:
.box::before { left: -100%; transition: 0.5s; } .box:hover::before { left: 100%; }
最后,隐藏容器之外的内容:
.box { overflow: hidden; }
大功告成!
关于使用纯CSS怎么实现带有金属光泽的立体按钮的动画效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。