【vue.js】在网页中实现一个金属抛光质感的按钮
文章目录
- 前言
- 效果
- 电脑效果
- 手机效果
- 说明
- 完整代码
- 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…...
android实现评论区功能
效果 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…...
Java每日一练(20230319)
目录 1. 最大矩形 🌟🌟🌟 2. 回文对 🌟🌟🌟 3. 给表达式添加运算符 🌟🌟🌟 🌟 每日一练刷题专栏 🌟 Golang每日一练 专栏 Python每日一练…...
Redis缓存双写一致性
目录双写一致性Redis与Mysql双写一致性canal配置流程代码案例双写一致性理解缓存操作细分缓存一致性多种更新策略挂牌报错,凌晨升级先更新数据库,在更新缓存先删除缓存,在更新数据库先更新数据库,在删除缓存延迟双删策略总结双写一致性 Redis与Mysql双写一致性 canal 主要是…...
【2023-Pytorch-检测教程】手把手教你使用YOLOV5做交通标志检测
项目下载地址：YOLOV5交通标志识别检测数据集代码模型教学视频-深度学习文档类资源-CSDN文库 交通标志的目标检测算法在计算机视觉领域一直属于热点研究问题，改进的优化算法不断地被提出。国内外许多学者针对现有的目标检测方法中网络结构、目标定位、损…...
Java中的二叉树
文章目录前言一、树形结构（了解）1.1 概念1.2 概念（重要）1.3 树的表示形式（了解）1.4 树的应用二、二叉树（重点）2.1 概念2.2 两种特殊的二叉树2.3 二叉树的性质2.5 二叉树的存储2.5 二…...
基于 gma 绘制古代洛阳 5 大都城遗址空间分布地图
了解 gma gma 是什么？ gma 是一个基于 Python 的地理、气象数据快速处理和数据分析函数包（Geographic and Meteorological Analysis，gma）。gma 网站：地理与气象分析库。 gma 的主要功能有哪些？ 气候气象&a…...
分析 Spring 的依赖注入模式
一、依赖注入二、Field Injection优点缺点三、Constructor Injection优点1. 容易发现 code smell优点2. 容易厘清依赖关系优点3. 容易写单元测试优点4. Immutable Object缺点：循环依赖四、总结一、依赖注入 依赖注入 （Dependency Injection，…...
IntelliJ IDEA创建Servlet
目录 ——————————————————————————————— 一、创建Java项目 1、创建java项目 2、选择java 3、next 4、给项目命名 5、新创建完java项目的目录结构 二、变java为servlet项目 1、变servlet项目 2、选择Web Application 3、更新完成后的目录…...
Spring Boot如何让自己的bean优先加载
背景介绍 在一些需求中，可能存在某些场景，比如先加载自己的bean，然后自己的bean做一些DB操作，初始化配置问题，然后后面的bean基于这个配置文件，继续做其他的业务逻辑。因此有了本文的这个题目。 实现方法…...
LeetCode分类刷题----动态规划
动态规划509.斐波那契数列70.爬楼梯746.使用最小花费怕楼梯62.不同路径63.不同路径||343.整数拆分96.不同的二叉搜索树01背包问题416.分割等和子集1049.最后一块石头的重量||494.目标和474.一和零完全背包问题518.零钱兑换||377.组合总和IV322.零钱兑换279.完全平方数139.单词拆…...
今年好像没有金三银四了？
大家好，我是记得诚。 金三银四，是换工作的高峰期，新的一年结束了，在年前拿完年终奖，在年后3月和4月换个满意的工作。 单从我公司来看，目前还没有一个人离职，往年离职率是要高一些的。 还有我…...
【C++】入门知识之 函数重载
前言提到重载这个词，我们会想到什么呢？重载有一种一词多义的意思，中华文化博大精深，之前有一个笑话，中国的乒乓球谁都打不过，男足谁都打不过，哈哈哈这也是非常有意思的，但是今天我们…...
文心一言发布，你怎么看？chatGPT
百度全新一代知识增强大语言模型“文心一言”于2021年3月16日正式发布，作为一款自然语言处理技术，它引起了广泛的关注和讨论。 首先，文心一言是一款具有重大意义的自然语言处理技术。在人工智能领域，自然语言处理技术一直是一个难…...
字符函数和字符串函数【上篇】
文章目录🎖️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 …...
list的模拟实现（模仿STL）
目录 一、模拟实现前的准备 1.list结构认识 2.迭代器的实现不同 3.如何实现需要的功能 二.结点类实现 三.迭代器实现 1.实现前的问题 2._list_iterator类的成员变量和构造函数 3.*和->运算符重载 4.前置和后置的实现 5.前置--和后置-- 6.和!运算符重载 四.list类的实现 1.li…...
05-STM32F1 - 串行通信SPI
SPI STM-SPI作为主机，从机 SPI的时钟，最高为Pclk/2，SPI1最高为36Mhz，SPI2最高为18Mhz。 SPI的四种模式 CPOL CPHA，数据帧8~16位，LSB,MSB 全双工，双向单线，单线 物理层 接口标准…...
【Pytorch】Tensor的分块、变形、排序、极值与in-place操作
本文参加新星计划人工智能(Pytorch)赛道：https://bbs.csdn.net/topics/613989052 这是目录Tensor的分块Tensor的变形Tensor的排序Tensor的极值Tensor的in-place操作Tensor是PyTorch中用于存储和处理多维数据的基本数据结构，它类似于NumPy中的ndarray&…...
数组栈的实现
个人主页：平行线也会相交 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 平行线也会相交 原创 收录于专栏【数据结构初阶（C实现）】 目录所有接口函数栈的初始化在栈顶放数据释放数据删除数据取栈顶的数据判断栈取区是否为…...
*p++,*(p++),*++p,(*p)++区别？
*p++：等同于：*p; p += 1; 解析：由于和++的运算优先级一样，且是右>结合。故p++相当于*(p++)，p先与++结合，>然后p++整体再与结合。前面陈述是一种最 常见的错误，很多初学者也是这么理解的。 但是，因为++后置的时候，本身含义就是先 运算后增加1（运算指的是p++作为…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...