使用纯CSS怎么实现带有金属光泽的立体按钮的动画效果
这篇文章将为大家详细讲解有关使用纯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怎么实现带有金属光泽的立体按钮的动画效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享标题:使用纯CSS怎么实现带有金属光泽的立体按钮的动画效果
网站URL:http://myzitong.com/article/pjidos.html