【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++作为…...
又一个线上偶发问题-系统短暂无法获取到Redis连接
概述 最近不知道咋回事，老是在线上遇到偶发的故障，它突然出现，又很快消失了。 在2023年3月11下午差不多六点左右，我正在工位上喝着香味扑鼻的金骏眉红茶，突然接到了一个电话，拿起手机一看，是阿里…...
[ 系统安全篇 ] 拉黑IP - 火绒安全软件设置IP黑名单 windows使用系统防火墙功能设置IP黑名单
🍬 博主介绍 👨🎓 博主介绍：大家好，我是 _PowerShell ，很高兴认识大家~ ✨主攻领域：【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…...
MongoDB【部署 01】mongodb最新版本6.0.5安装部署配置使用及mongodb-shell1.8.0安装使用（云盘分享安装文件）
云盘分享文件： 链接：https://pan.baidu.com/s/11sbj1QgogYHPM4udwoB1rA 提取码：l2wz 1.mongodb简单介绍 MongoDB的 官网 内容还是挺丰富的。 是由 C语言编写的，是一个基于分布式文件存储的开源数据库系统。在高负载的情况下&…...
算法竞赛必考算法——动态规划(01背包和完全背包）
动态规划(一) 目录动态规划(一)1.01背包问题1.1题目介绍1.2思路一介绍(二维数组)1.3思路二介绍(一维数组) 空间优化1.4思路三介绍(输入数据优化)2.完全背包问题2.1题目描述：2.2思路一(朴素算法)2.3思路二(将k优化处理掉)2.4思路三(优化j的初始条件)总结1.01背包问题…...
基于深度学习的农作物叶片病害检测系统（UI界面+YOLOv5+训练数据集）
摘要：农作物叶片病害检测系统用于智能检测常见农作物叶片病害情况，自动化标注、记录和保存病害位置和类型，辅助作物病害防治以增加产值。本文详细介绍基于YOLOv5深度学习模型的农作物叶片病害检测系统，在介绍算法原理的同时&#…...
QT入门Item Views之QListView
目录 一、QListView界面相关 1、布局介绍 二、代码展示 1、创建模型，导入模型 2、 设置隔行背景色 3、删除选中行 三、源码下载 此文为作者原创，创作不易，转载请标明出处！ 一、QListView界面相关 1、布局介绍 先看下界面…...
GEE：计算1990-2021年的指数最大值和最小值，并根据最大最小值对每一副影像归一化
本文记录了在GEE平台上计算影像集合中所有像素的最大值和最小值。并且根据该最大最小值对所有影像进行最大最小值归一化。以SAVI为例，记录了主要函数的使用方法和代码。 结果如图所示， 文章目录 一、计算每一副影像的最大值或者最小值，并将最值保存在 List 中二、计算 Lis…...
LeetCode KMP 算法
可以参考https://www.bilibili.com/video/BV1AY4y157yL/kmp 主要做的就是子串匹配，类似C程序的 strstr() 函数记录一下，也防止我自己忘记传统暴力求解算法是源串 ssssssssa 子串 sssa（下面暴力求解） 先 (子串从 0 位置匹配&#x…...
全面剖析OpenAI发布的GPT-4比其他GPT模型强在哪里
最强的文本生成模型GPT-4一、什么是GPT-4二、GPT-4的能力三、和其他GPT模型比较3.1、增加了图像模态的输入3.2、可操纵性更强3.3、复杂任务处理能力大幅提升3.4、幻觉、安全等局限性的改善3.6、风险和缓解措施改善更多安全特性3.7、可预测的扩展四、与之前 GPT 系列模型比较五、…...
leetcode——26. 删除有序数组中的重复项
文章目录🐨1. 题目🏹2. 思路🪃3. 代码实现🐨1. 题目 给你一个升序排列的数组nums，请你原地删除重复出现的元素，使每个元素只出现一次，返回删除后数组的新长度。元素的相对顺序应该保持一致。 由…...