前端日常实践：4#视频演示如何使用纯CSS制作金属光泽3D按钮效果
时间：2023-04-02 15:05:33
HTML
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接即可全屏预览。https://codepen.io/zhang-ou/full/MGeRRO互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cdKMBTk源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/004-metallic-glossy-3d-button-effects代码解读在dom中定义一个容器：BUTTON
容器中心显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background-color:skyblue;}设置按钮的二维样式，方便调整按钮大小，使用变量：.box{background:linear-gradient(toright,gold,darkorange);白颜色;--宽度：250px；--height:计算(var(--width)/3);宽度：var(--宽度)；高度：var(--height)；文本对齐：居中；行高:var(--height);字体大小：calc(var(--height)/2.5);字体系列：无衬线；字母间距：0.2em；边框：1px实心黑金棒；border-radius:2em;}设置按钮的3d样式：.box{transform:perspective(500px)rotateY(-15deg);文字阴影：6px3px2pxrgba(0,0,0,0.2);盒子阴影：2px005pxrgba(0,0,0,0.2);}定义按钮的鼠标悬停动画效果：.box:hover{transform:perspective(500px)rotateY(15度);文字阴影：-6px3px2pxrgba(0,0,0,0.2);box-shadow:-2px005pxrgba(0,0,0,0.2);}.box{transition:0.5s;}使用伪元素添加光泽:.box{position:relative;}.box::before{内容：'';位置：绝对；宽度：100%；高度：100%；背景：线性渐变（向右，透明，白色，透明）；left:0;}定义光泽动画效果：.box::before{left:-100%;transition:0.5s;}.box:hover::before{left:100%;}最后，隐藏容器外的内容：.box{overflow:hidden;}就大功告成了！知识点linear-gradienthttps://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradientvariableshttps://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variablescalchttps//developer.mozilla.org/en-US/docs/Web/CSS/calcperspectivehttps://developer.mozilla.org/en-US/docs/Web/CSS/perspectivetext-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadowbox-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
