金属质感不锈钢按钮Button

已于 2023-08-14 00:39:33 修改
阅读量1.3k 收藏 10
点赞数 11
分类专栏： 前端 文章标签： css css3 前端 javascript canva可画
于 2023-03-06 10:52:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lileiit/article/details/129357180
版权

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>居中放大按钮示例</title>
    <style>
        button {
            width: 300px;
  height: 100px;
  font-size: 40px;

  border-radius: 100px;
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(255, 253, 253, 0.776);
  border-right: 2px solid  rgba(255, 253, 253, 0.7);
  border-bottom: 2px solid rgba(255, 253, 253, 0.7);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #808080;
  box-shadow: 8px 0px 40px rgba(0, 0, 0, 0.8);
  font-weight: bold;
  
  text-shadow: 0px 1px 1px #ffffff, 0px 1px 1px #000000ba;
  color: rgba(14, 14, 14, 0.915);
        }
    </style>
</head>

<body>
    <button id="btn">Button</button>
</body>
<script>
    // 获取按钮和视频元素
    const btn = document.getElementById('btn');

    // 获取用户媒体
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
            // 播放摄像头视频流
            const video = document.createElement('video');
            video.srcObject = stream;
            video.play();

            // 定义更新函数
            function update() {
                // 获取视频帧
                const track = stream.getVideoTracks()[0];
                const imageCapture = new ImageCapture(track);
                imageCapture.grabFrame()
                    .then(imageBitmap => {
                        // 将图像绘制到 canvas 上
                        const canvas = document.createElement('canvas');
                        canvas.width = imageBitmap.width;
                        canvas.height = imageBitmap.height;
                        const ctx = canvas.getContext('2d');
                    
                        // 将图像水平翻转，实现镜像效果
                        ctx.scale(-1, 1);
                        ctx.translate(-canvas.width, 0);
                        ctx.filter = 'blur(3px)';
                        // 绘制图像中心位置
                        const centerX =100;
                        const centerY = 500;

                        // 只绘制中间部分
                        const cropWidth = 400;
                        const cropHeight = 600;
                        const cropLeft = centerX - cropWidth / 4;
                        const cropTop = centerY - cropHeight / 4;
                
                        ctx.drawImage(
                            imageBitmap,
                            cropLeft,
                            cropTop,
                            cropWidth,
                            cropHeight,
                            50,
                            -6,
                            canvas.width,
                            canvas.height
                        );
                      
                        // 将 canvas 转换为 data URL，并将其设置为按钮的背景
                        const dataURL = canvas.toDataURL('image/jpeg');
                        btn.style.backgroundImage = `url(${dataURL})`;

                        // 在下一帧更新
                        requestAnimationFrame(update);
                    })
                    .catch(error => {
                        console.error('获取帧失败', error);
                    });
            }

            // 在第一帧更新
            requestAnimationFrame(update);
        })
        .catch(error => {
            console.error('获取摄像头失败', error);
        });
</script>

</html>

2023年8月24日更新
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>按钮不锈钢LLOG.cc</title>
    <style>

        button {
            width: 300px;
            height: 100px;
            font-size: 40px;
            border-radius: 100px;
            border-top: 1px solid rgba(255, 255, 255, 0.9);
            border-left: 1px solid rgba(255, 253, 253, 0.776);
            border-right: 2px solid rgba(255, 253, 253, 0.7);
            border-bottom: 2px solid rgba(255, 253, 253, 0.7);
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #808080;
            box-shadow: 8px 0px 40px rgba(0, 0, 0, 0.8);
            font-weight: bold;
            text-shadow: 0px 1px 1px #ffffff, 0px 1px 1px #000000ba;
            color: rgba(14, 14, 14, 0.915);
        }

        .controls {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
    </style>
</head>

<body>
    <button id="btn">Button</button>
    <div class="controls">
        <label for="brightness">亮度</label>
        <input type="range" id="brightness" min="0.5" max="2" step="0.1" value="1">
        <label for="contrast">对比度</label>
        <input type="range" id="contrast" min="0.5" max="2" step="0.1" value="1">
        <label for="opacity">不锈钢透明度</label>
        <input type="range" id="opacity" min="0" max="1" step="0.1" value="0.3">
    </div>
</body>
<script>
// 获取当前页面的缩放级别
function getZoomLevel() {
  return Math.round(window.devicePixelRatio * 100);
}

// 设置页面缩放级别
function setZoomLevel(zoomPercentage) {
  const scale = zoomPercentage / 100;
  document.body.style.zoom = scale;
}

// 默认将页面缩放调整到170%
setZoomLevel(170);

// 可以在需要的时候调用 setZoomLevel 方法来调整缩放级别

    // 获取按钮和视频元素
    const btn = document.getElementById('btn');
    const brightnessInput = document.getElementById('brightness');
    const contrastInput = document.getElementById('contrast');
    const opacityInput = document.getElementById('opacity');

    // 获取用户媒体
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
            // 播放摄像头视频流
            const video = document.createElement('video');
            video.srcObject = stream;
            video.play();

            // 定义更新函数
            function update() {
                // 获取视频帧
                const track = stream.getVideoTracks()[0];
                const imageCapture = new ImageCapture(track);
                imageCapture.grabFrame()
                    .then(imageBitmap => {
                        // 将图像绘制到 canvas 上
                        const canvas = document.createElement('canvas');
                        canvas.width = imageBitmap.width;
                        canvas.height = imageBitmap.height;
                        const ctx = canvas.getContext('2d');

                        // 将图像水平翻转，实现镜像效果
                        ctx.scale(-1, 1);
                        ctx.translate(-canvas.width, 0);

                        // 调整图像亮度和对比度
                        ctx.filter = `brightness(${brightnessInput.value}) contrast(${contrastInput.value})`;

                        // 绘制图像中心位置
                        const centerX = 0;
                        const centerY = 400;

                        // 只绘制中间部分
                        const cropWidth = 700;
                        const cropHeight = 700;
                        const cropLeft = centerX - cropWidth / 4;
                        const cropTop = centerY - cropHeight / 4;
                        ctx.drawImage(
                            imageBitmap,
                            cropLeft,
                            cropTop,
                            cropWidth,
                            cropHeight,
                            50,
                            -6,
                            canvas.width,
                            canvas.height
                        );

                        // 添加模糊效果
                        ctx.filter = 'blur(2px)';

                        // 设置不锈钢颜色和透明度
                        ctx.fillStyle = `rgba(255, 255, 255, ${opacityInput.value})`;
                        ctx.fillRect(0, 0, canvas.width, canvas.height);

                        // 绘制完整效果后，将 canvas 转换为 data URL，并将其设置为按钮的背景
                        const dataURL = canvas.toDataURL('image/jpeg');
                        btn.style.backgroundImage = `url(${dataURL})`;

                        // 在下一帧更新
                        requestAnimationFrame(update);
                    })
                    .catch(error => {
					    requestAnimationFrame(update);
                        console.error('获取帧失败，无视错误重新执行！', error);
                    });
            }

            // 在第一帧更新
            requestAnimationFrame(update);
        })
        .catch(error => {
            console.error('获取摄像头失败', error);
        });
</script>

</html>
MUZ木
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML5+CSS3小实例：动感的金属质感闪光文字
艾恩小灰灰的博客
08-01 364
实例：动感的金属质感闪光文字。 技术栈：HTML、CSS。
CSS3金属质感立体按钮
05-01
CSS3金属质感立体按钮，类似金属的设计，四种效果按钮。
解决搜索框和搜索按钮button边框不能重合的问题
01-18
今天在用百度页面做练习的时候突然发现，尽管设置了搜索框和button的margin值和padding值各为0，他们俩的边框还是不能重合（不想用position） 无奈之下问了老师，老师说设置他俩的父元素的font-size为0就行，因为父元素的文本内容有个默认的font-size使得他俩的间距始终不能完全重合，所以设置font-size之后就完美解决， 但是由于标签属性可以继承，还要注意子标签中的文本内容有没有受到影响，如有影响自然是另外设置。 在Chrome的控制台修改font-size的值时发现只要不为0，俩框就会分开到一个固定距离，无论值有多大都不变。 总结 到此这篇关于解决搜索框和
Uniapp 各类 button按钮
最新发布
09-12
button按钮 复制粘贴使用
C#动态创建button按钮的方法实例详解
12-26
C#动态创建button按钮的方法实例详解 C#编程中经常需要动态创建，本文主要介绍C#动态创建button按钮的方法，涉及C#按钮属性动态设置的相关技巧，以供借鉴参考。具体实现方法如下： 例子： using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.R
CSS3金属质感按钮特效
07-24
CSS3金属质感按钮特效是一款4种不同效果的金属质感渐变按钮，立体的按钮特效。
JS button按钮实现submit按钮提交效果
01-19
今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交，所以想到的实现方法就是 使用button实现,代码实现见如下： form设置： <form method=”post” name=”linkform”> 隐藏的act方法设置,代码如下: <input name=”act” type=”hidden” /> 最后关键的是 button的设置,更新按钮,代码如下: <input onclick=”document.linkform.act.value='update'; document.linkform.submit();” name=
前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
weixin_33835103的博客
04-26 282
效果预览 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cdK...
css金属感按钮样子
ICode联盟
05-07 322
下载地址 漂亮的css金属感按钮样子 dd:
颜色名称及色样表(HTML版)
chritina的专栏
03-30 3357
颜色名称及色样表(HTML版)  名称 Color Name 中文名称 Hex RGB 十进制 Decimal 数值   LightPink 浅粉红 #FFB6C1 255,182,193     Pink 粉红 #FFC0CB 255,192,203     Crimson 深红(猩红) #DC143C 220,2
css__金属质感的文字
u011927449的博客
07-22 1050
金属质感的文字 网上看到的优秀思想！神奇的css~~~~ css div.a { width: 300px; text-align: center; color: white; background: black; font-weight: bold; font-size: 30px; position: relative;
超炫button按钮动画效果
03-16
超炫button按钮动画效果 附带activity切换动画效果，其实在一个项目里，大家自己体验吧!
Javaweb项目 SMBMS 超市订单管理系统：准备工作、登录与注销、修改密码、用户管理
joseph的博客
07-04 1801
SMBMS 一、准备工作 1.基本架构 2.在数据库中创建对应的表 对应的sql代码： CREATE DATABASE `smbms`; USE `smbms`; DROP TABLE IF EXISTS `smbms_address`; CREATE TABLE `smbms_address` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `contact` varchar(15) COLLATE utf8_unicod
不锈钢按钮效果 | React
qq_58360406的博客
03-25 492
今天起来无聊，打开了GitHub，无意中发现了一个非常有趣的react项目，我打开他效果演示，我惊呆了，我立刻打开我的简历，把熟悉前端样式实现改成了解
前端提示框定位在鼠标的右下_讯飞智能鼠标体验记，说出来你都不信，这款鼠标能打字...
weixin_39991148的博客
12-04 82
键盘和作为PC上最常用的文字输入设备，一直有着不可取代的地位。不过在语音识别领域颇有建树的讯飞，最近推出了一款讯飞智能鼠标Lite，具有语音输入的功能，似乎可以取代部分键盘的功能，今天我们就来实际体验这款产品。外观设计 讯飞智能鼠标lite，设计十分简约，深色的外观看起来还是比较稳重大气的，鼠标整体外观相比普通鼠标要显得更加扁平，虽然这样的外观设计会导致握持手感的下降，但是我想这是讯飞有意为之，因...
html质感阴影_CSS3 金属质感的3D立体阴影文字特效
weixin_39996908的博客
12-24 906
HTML5 3D立体金属文字body{background-color:#272727}h1{font-family:"微软雅黑",sans-serif;font-size:77px;text-align:center;font-weight:bold;color:#3d3d3d;margin-top:200px}.text{position:relative}.text:after{conten...
特别的/高冷的/金属感的/css3/loading效果
lx583274568的专栏
09-27 256
等边三角形，每条边单独进入，转圈圈的纯css实现 现在画三角形多半是通过宽高为0的元素，用border来实现的，但是产品说：“想要一条线一条线单独出来，有一种连线的感觉” 哦.... 不知道怎么录gif 反正是这个三角形连线出现 然后一直在转圈圈。 先写html。 <div class="whiteTriWrap"> <div class="rotate...
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
anfuye3276的博客
12-09 157
4. 纯 CSS 创作一个金属光泽 3D 按钮特效 原文地址：https://segmentfault.com/a/1190000014599280 HTML代码： <div class="box">BUTTON</div&gt...
纯CSS实现button按钮
热门推荐
weixin_48463527的博客
12-03 1万+
纯CSS实现button按钮
点击button按钮改变button按钮颜色
04-05
以下是使用JavaScript代码实现点击按钮改变按钮颜色的示例： HTML代码： ``` <button id="myButton">Click me</button> ``` JavaScript代码： ``` var button = document.getElementById("myButton"); button.onclick = function() { button.style.backgroundColor = "red"; }; ``` 在上面的代码中，我们首先通过`document.getElementById`方法获取按钮元素，然后将其存储在`button`变量中。接着，我们使用`button.onclick`方法来定义点击按钮时要执行的操作，即改变按钮的背景颜色为红色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值