实现一个逼真的不锈钢按钮！！

最新推荐文章于 2024-10-27 11:25:22 发布

小玛喽

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量432

点赞数 6

分类专栏：前端 js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_70711237/article/details/136215981

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

前端如何实现一个不锈钢样式的按钮？这是我之前做的一个小案例，今天给大家分享一下。

以下是不锈钢按钮的实现样式
不锈钢按钮样式

其实要实现不锈钢按钮的难点在于不锈钢会有金属光泽，会反光、有镜像、要有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>