当前位置：首页 > news >正文

【vue.js】在网页中实现一个金属抛光质感的按钮

news 2026/4/1 13:28:25

文章目录

前言
效果
- 电脑效果
- 手机效果
说明
完整代码
- index.html

前言

诶？这有一个按钮(～￣▽￣)～，这是一个在html中实现的具有金属质感并且能镜面反射的按钮~

效果

在这里插入图片描述

电脑效果

在这里插入图片描述

手机效果

在这里插入图片描述

说明

主要思路是使用 navigator.mediaDevices.getUserMedia()调用设备摄像头来实现镜面反射，css部分用到了filter属性，后期可以根据需要调整它的属性值，做出更多反射效果。有了思路，实现起来还是比较简单的。

需要注意的是window.navigator.mediaDevices.getUserMedia()只能在localhost或https下才能使用，否则会报错哦。

完整代码

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>body {background-color: rgb(86, 86, 86);}:root {--transition: 0.1s;--border-radius: 56px;}.button-wrap {margin: calc(30vh - 50px) auto 0;width: 300px;height: 100px;position: relative;transition: transform var(--transition), box-shadow var(--transition);}.button-wrap.pressed {transform: translateZ(0) scale(0.98);}.button {width: 100%;height: 100%;overflow: hidden;border-radius: var(--border-radius);box-shadow:0px 0px 10px rgba(0, 0, 0, 0.6),0px 0px 20px rgba(0, 0, 0, 0.4),0px 0px 40px rgba(0, 0, 0, 0.2),inset 0 2px 2px rgba(255, 255, 255, 0.8),inset 0 -2px 2px rgba(255, 255, 255, 0.8);transform: translateZ(0);cursor: pointer;}.button.pressed {box-shadow:0px 0px 5px rgba(0, 0, 0, 0.6),0px 0px 10px rgba(0, 0, 0, 0.4),0px 0px 20px rgba(0, 0, 0, 0.2),inset 0 2px 2px rgba(255, 255, 255, 0.8),inset 0 -2px 2px rgba(255, 255, 255, 0.8);}.text {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);pointer-events: none;color: rgba(0, 0, 0, 0.9);font-size: 48px;font-weight: bold;text-shadow:0px 2px 1px rgba(255, 255, 255, 0.3),0px -2px 1px rgba(255, 255, 255, 0.3);}.text::selection {background-color: transparent;}.button .button-reflection {width: 100%;height: 100%;transform: scaleX(-1);object-fit: cover;opacity: 0.7;filter: blur(2px) saturate(0.6) brightness(1.1);object-position: 0 -100px;}</style>
</head><body><div id="app"><div v-show="cameraOpened" :class="`button-wrap ${buttonPressed ? 'pressed' : ''}`"><div :class="`button ${buttonPressed ? 'pressed' : ''}`" @mousedown="setButtonPressed(true)"@mouseup="setButtonPressed(false)" @touchstart="setButtonPressed(true)" @touchend="setButtonPressed(false)"><video class="button-reflection" ref="reflectionRef" /></div><div class="text">Button</div></div></div><script>new Vue({el: '#app',data: {cameraOpened: false,buttonPressed: false},mounted() {const _this = thisnavigator.mediaDevices.getUserMedia({video: true,audio: false}).then((stream) => {const video = this.$refs.reflectionRefvideo.srcObject = stream;video.onloadedmetadata = () => {_this.cameraOpened = truevideo.play()}})},methods: {setButtonPressed(val) {this.buttonPressed = val}}})</script>
</body></html>

【vue.js】在网页中实现一个金属抛光质感的按钮

文章目录前言效果电脑效果手机效果说明完整代码index.html前言诶？这有一个按钮(～￣▽￣)～，这是一个在html中实现的具有金属质感并且能镜面反射的按钮~ 效果电脑效果手机效果说明主要思路是使用 navig…...

编程日记 2023/3/19 13:20:55

效果 activity_detail.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto"xmlns:tools"http…...

编程日记 2023/3/19 13:15:52

Java每日一练(20230319)

目录 1. 最大矩形 🌟🌟🌟 2. 回文对 🌟🌟🌟 3. 给表达式添加运算符 🌟🌟🌟 🌟 每日一练刷题专栏 🌟 Golang每日一练专栏 Python每日一练…...

编程日记 2023/3/19 13:10:49

Redis缓存双写一致性

目录双写一致性Redis与Mysql双写一致性canal配置流程代码案例双写一致性理解缓存操作细分缓存一致性多种更新策略挂牌报错,凌晨升级先更新数据库,在更新缓存先删除缓存,在更新数据库先更新数据库,在删除缓存延迟双删策略总结双写一致性 Redis与Mysql双写一致性 canal 主要是…...

编程日记 2023/3/19 13:05:47

【2023-Pytorch-检测教程】手把手教你使用YOLOV5做交通标志检测

项目下载地址：YOLOV5交通标志识别检测数据集代码模型教学视频-深度学习文档类资源-CSDN文库交通标志的目标检测算法在计算机视觉领域一直属于热点研究问题，改进的优化算法不断地被提出。国内外许多学者针对现有的目标检测方法中网络结构、目标定位、损…...

编程日记 2023/3/19 13:00:46

Java中的二叉树

文章目录前言一、树形结构（了解）1.1 概念1.2 概念（重要）1.3 树的表示形式（了解）1.4 树的应用二、二叉树（重点）2.1 概念2.2 两种特殊的二叉树2.3 二叉树的性质2.5 二叉树的存储2.5 二…...

编程日记 2023/3/19 12:55:44

基于 gma 绘制古代洛阳 5 大都城遗址空间分布地图

了解 gma gma 是什么？ gma 是一个基于 Python 的地理、气象数据快速处理和数据分析函数包（Geographic and Meteorological Analysis，gma）。gma 网站：地理与气象分析库。 gma 的主要功能有哪些？ 气候气象&a…...

编程日记 2023/3/19 12:50:43

分析 Spring 的依赖注入模式

一、依赖注入二、Field Injection优点缺点三、Constructor Injection优点1. 容易发现 code smell优点2. 容易厘清依赖关系优点3. 容易写单元测试优点4. Immutable Object缺点：循环依赖四、总结一、依赖注入依赖注入 （Dependency Injection，…...

编程日记 2023/3/19 12:45:42

IntelliJ IDEA创建Servlet

目录 ——————————————————————————————— 一、创建Java项目 1、创建java项目 2、选择java 3、next 4、给项目命名 5、新创建完java项目的目录结构二、变java为servlet项目 1、变servlet项目 2、选择Web Application 3、更新完成后的目录…...

编程日记 2023/3/19 12:40:40

Spring Boot如何让自己的bean优先加载

背景介绍在一些需求中，可能存在某些场景，比如先加载自己的bean，然后自己的bean做一些DB操作，初始化配置问题，然后后面的bean基于这个配置文件，继续做其他的业务逻辑。因此有了本文的这个题目。实现方法…...

编程日记 2023/3/19 12:35:38

LeetCode分类刷题----动态规划

动态规划509.斐波那契数列70.爬楼梯746.使用最小花费怕楼梯62.不同路径63.不同路径||343.整数拆分96.不同的二叉搜索树01背包问题416.分割等和子集1049.最后一块石头的重量||494.目标和474.一和零完全背包问题518.零钱兑换||377.组合总和IV322.零钱兑换279.完全平方数139.单词拆…...

编程日记 2023/3/19 12:30:37

今年好像没有金三银四了？

大家好，我是记得诚。金三银四，是换工作的高峰期，新的一年结束了，在年前拿完年终奖，在年后3月和4月换个满意的工作。单从我公司来看，目前还没有一个人离职，往年离职率是要高一些的。还有我…...

编程日记 2023/3/19 12:25:35

【C++】入门知识之函数重载

前言提到重载这个词，我们会想到什么呢？重载有一种一词多义的意思，中华文化博大精深，之前有一个笑话，中国的乒乓球谁都打不过，男足谁都打不过，哈哈哈这也是非常有意思的，但是今天我们…...

编程日记 2023/3/19 12:20:33

文心一言发布，你怎么看？chatGPT

百度全新一代知识增强大语言模型“文心一言”于2021年3月16日正式发布，作为一款自然语言处理技术，它引起了广泛的关注和讨论。首先，文心一言是一款具有重大意义的自然语言处理技术。在人工智能领域，自然语言处理技术一直是一个难…...

编程日记 2023/3/19 12:15:32

字符函数和字符串函数【上篇】

文章目录🎖️1.函数介绍📬1.1. strlen📬1.2. strcpy📬1.3. strcat📬1.4. strcmp📬1.5. strncpy📬1.6. strncat📬1.7. strncmp🎖️1.函数介绍 📬1.1. strlen …...

编程日记 2023/3/19 12:10:30

list的模拟实现（模仿STL）

目录一、模拟实现前的准备 1.list结构认识 2.迭代器的实现不同 3.如何实现需要的功能二.结点类实现三.迭代器实现 1.实现前的问题 2._list_iterator类的成员变量和构造函数 3.*和->运算符重载 4.前置和后置的实现 5.前置--和后置-- 6.和!运算符重载四.list类的实现 1.li…...

编程日记 2023/3/19 12:05:29

05-STM32F1 - 串行通信SPI

SPI STM-SPI作为主机，从机 SPI的时钟，最高为Pclk/2，SPI1最高为36Mhz，SPI2最高为18Mhz。 SPI的四种模式 CPOL CPHA，数据帧8~16位，LSB,MSB 全双工，双向单线，单线物理层接口标准…...

编程日记 2023/3/19 12:00:28

【Pytorch】Tensor的分块、变形、排序、极值与in-place操作

本文参加新星计划人工智能(Pytorch)赛道：https://bbs.csdn.net/topics/613989052 这是目录Tensor的分块Tensor的变形Tensor的排序Tensor的极值Tensor的in-place操作Tensor是PyTorch中用于存储和处理多维数据的基本数据结构，它类似于NumPy中的ndarray&…...

编程日记 2023/3/19 11:55:26