前端如何实现一个不锈钢样式的按钮?这是我之前做的一个小案例,今天给大家分享一下。
以下是不锈钢按钮的实现样式
其实要实现不锈钢按钮的难点在于不锈钢会有金属光泽,会反光、有镜像、要有3d质感。
html结构如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="container">
<div class="model"></div>
<video id="video"></video>
</div>
<body/>
<html/>
css样式如下
.container{
width: 200px;
height: 80px;
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 2px 10px 10px rgb(87, 85, 85);
border: 1px solid rgb(202, 198, 198);
margin: 50px auto;
cursor: pointer;
transition all: 1s;
}
.container:hover{
box-shadow: 2px 8px 8px rgb(54, 54, 54);
transform: scale(0.98);
}
.model{
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
z-index: 3;
background-image: radial-gradient( ellipse,rgb(255, 247, 247) 0%, silver 50%);
opacity: 0.86;
/* opacity: 0.86; */
}
#video{
position: absolute;
left: 0;
top: 0;
}
js代码
const width = 200;
const height = 80;
const video = document.getElementById("video");
//访问摄像头
if (
navigator.mediaDevices.getUserMedia ||
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia
) {
//调用用户媒体设备, 访问摄像头
getUserMedia(
{ video: { width: width, height: height } },
success,
error
);
} else {
alert("不支持访问用户媒体");
}
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices
.getUserMedia(constraints)
.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
//成功回调
function success(stream) {
console.log("成功");
//兼容webkit核心浏览器
// const CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
// video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
//失败回调
function error(error) {
console.log("失败");
console.log("访问用户媒体设备失败", error);
}
1.金属光泽
我们这里给按钮容器设置银灰色、设置透明度
.model{
background-image: radial-gradient( ellipse,rgb(255, 247, 247) 0%, silver 50%);
opacity: 0.86;
}
2.3d质感
给父盒子设置box-shadow阴影、边框颜色和过渡,当鼠标移动的时候改变阴影以及进行轻微缩放
.container{
box-shadow: 2px 10px 10px rgb(87, 85, 85);
border: 1px solid rgb(202, 198, 198);
cursor: pointer;
transition all: 1s;
}
.container:hover{
box-shadow: 2px 8px 8px rgb(54, 54, 54);
transform: scale(0.98);
}
3.镜像反光
像不锈钢这种金属都具有镜像反光的特性,那我们前端如果要实现这样的效果,那就只有使用video这个组件了,所以在父盒子中有一个按钮背景的div还有一个video
const width = 200;
const height = 80;
const video = document.getElementById("video");
//访问摄像头,判断当前用户电脑是否有摄像头
if (
navigator.mediaDevices.getUserMedia ||
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia
) {
//调用用户媒体设备, 访问摄像头
getUserMedia(
{ video: { width: width, height: height } },
success,
error
);
} else {
alert("不支持访问用户媒体");
}
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices
.getUserMedia(constraints)
.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
//成功回调
function success(stream) {
console.log("成功");
//兼容webkit核心浏览器
// const CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
// video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
//失败回调
function error(error) {
console.log("失败");
console.log("访问用户媒体设备失败", error);
}
通过以上步骤,我们就可以实现一个不锈钢按钮了
完整源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container{
width: 200px;
height: 80px;
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 2px 10px 10px rgb(87, 85, 85);
border: 1px solid rgb(202, 198, 198);
margin: 50px auto;
cursor: pointer;
transition all: 1s;
}
.container:hover{
box-shadow: 2px 8px 8px rgb(54, 54, 54);
transform: scale(0.98);
}
.model{
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
z-index: 3;
background-image: radial-gradient( ellipse,rgb(255, 247, 247) 0%, silver 50%);
opacity: 0.86;
/* opacity: 0.86; */
}
#video{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="model"></div>
<video id="video"></video>
</div>
<script>
const width = 200;
const height = 80;
const video = document.getElementById("video");
//访问摄像头,判断当前用户电脑是否有摄像头
if (
navigator.mediaDevices.getUserMedia ||
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia
) {
//调用用户媒体设备, 访问摄像头
getUserMedia(
{ video: { width: width, height: height } },
success,
error
);
} else {
alert("不支持访问用户媒体");
}
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices
.getUserMedia(constraints)
.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
//成功回调
function success(stream) {
console.log("成功");
//兼容webkit核心浏览器
// const CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
// video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
//失败回调
function error(error) {
console.log("失败");
console.log("访问用户媒体设备失败", error);
}
</script>
</body>
</html>