4.纯CSS创作⼀个⾦属光泽3D按钮特效
HTML代码：
<div class="box">BUTTON</div>
css代码：
/* 内容居中*/
html, body {
/* 使body继承HTML的⾼度 ，否则box是不能垂直居中*/
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: skyblue;
}
/*设置按钮的 2d 样式，为了便于调整按钮尺⼨，使⽤了变量*/
.box{
css特效文字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:cal(var(--height)/2.5);
font-family:sans-serif;
letter-spacing:0.2em;
border:1px solid darkgoldenrod;
border-radius:2em;
/*设置按钮的 3d 样式*/
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);
transition: 0.5s;
position: relative;
overflow: hidden;
}
/* 定义按钮的⿏标划过动画效果 */
.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::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, white, transparent);
left: -100%;
transition: 0.5s;
}
.box:hover::before {
left: 100%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。