使用css和js给按钮添加微交互的几种方式

使用css和js给按钮添加微交互的几种方式

在现实世界中,当我们轻弹或按下某些东西时,它们会发出咔嗒声,例如电灯开关。有些东西会亮起或发出蜂鸣声,这些响应都是“微交互”,让我们知道我们何时成功完成了某件事。在本文中,我们将学习向网页按钮添加微交互的几种简单方法。

什么是微交互

微交互是用户界面上的小交互或动画。当用户执行操作时,它们向用户提供即时反馈。微交互可以保持用户的参与度并可以改善他们的整体体验。

微交互的一些示例包括我们与某人在线聊天时的打字指示器、下载的进度条以及刷新页面时的加载指示器。

按钮是网站上最常见的交互元素之一,它们可以执行一系列任务,例如切换、提交、删除、关闭、选择(通过单选按钮、选项按钮或选择菜单)等。

基本样式

<style>* {margin: 0;padding: 0}body {height: 100vh;display: flex;align-items: center;justify-content: center;}
</style>

有弹性的微交互

我们可以使用 CSStransform属性创建一个 3D 按钮,单击它时该按钮会弹起。

<button class="btn"><span class="text">提交</span></button>

对于此示例,我们在<button>中嵌套了一个<span>. 通常,创建按钮时不需要这样做,但我们需要它来创建按钮的最终 3D 外观。

.btn {position: relative;background: #004958;border-radius: 15px;border: none;cursor: pointer;
}.text {display: block;padding: 15px 45px;border-radius: 15px;background: #00c2cb;font-size: 1.5rem;font-weight: 500;color: #42455a;transform: translateY(-6px);transition: transform ease 0.1s;
}.btn:active .text {transform: translateY(-2px);
}

请添加图片描述

带边框动画的按钮

有多种方法可以为按钮的边框设置动画,因此我们将展示几个示例。

简单的边框微交互

让我们从简单的事情开始。通常,如果我们想向任何元素添加边框,我们会使用border 属性。但是在CSS中,也有outline属性,这俩非常相似。它在元素周围添加轮廓。轮廓会覆盖它们所应用的元素,这意味着它们是围绕边框绘制的。

它们甚至以相同的方式声明。以下是带有轮廓和边框的按钮示例:

button {border: 3px solid cyan;outline: 3px solid red;
}

下面的屏幕截图显示了它的样子:

在这里插入图片描述

轮廓不会影响主元素(在本例中为按钮)的尺寸,并且它们可以重叠其他内容或元素。我们还可以使用outline-offset属性更改他们的位置。

正偏移值会将轮廓向外推,远离边框。负值将起到相反的作用。因此,例如,如果我们想隐藏轮廓,我们需要为其指定边框宽度的负值。这就是我们为按钮创建微交互的动画:

<button class="btn">提交</button>
button {border: none;position: relative;padding: 15px 45px;background: transparent;border-radius: 10px;border: 2px solid #00c2cb;outline: 2px solid #00c2cb;outline-offset: -2px;font-size: 1.5rem;color: #00c2cb;font-weight: 500;cursor: pointer;transition: outline-offset 200ms ease;
}button:hover {outline-offset: 3px;
}
button:active{transform: scale(0.95);
}

请添加图片描述

带有伪元素的按钮悬停效果

我们将使用::before::after伪元素以及inset属性来创建一些漂亮的边框动画。

我们将逐步设置我们的样式,先设置button样式:

button {position: relative;background: transparent;padding: 15px 45px;border-radius: 15px;border: none;font-size: 1.5rem;color: #e0ffff;font-weight: 500;cursor: pointer;z-index: 1;
}

insert添加到::before该按钮的伪元素中。它的值为0px 50px,因此它仅适用于 y 轴(inset属性将元素水平和垂直地推离其父元素)

button::before {content: '';position: absolute;inset: 0px 50px;background: #42455a;transition: inset 350ms ease;z-index: -1;
}

::after伪元素将覆盖::before伪元素,留下一个inset大小的间隙,从而创建一个边框。

button::after {content: '';position: absolute;inset: 3px;border-radius: 10px;background: #22232e;z-index: -1;
}

为了获得最终的外观,我们将添加<button>元素添加overflow: hidden。这将删除方角并完成该按钮的微交互。

整体代码:

button {position: relative;overflow: hidden;background: transparent;padding: 15px 45px;border-radius: 15px;border: none;font-size: 1.5rem;color: #e0ffff;font-weight: 500;cursor: pointer;z-index: 1;
}
button:active{transform: scale(0.95);
}
button::before{content: '';position: absolute;inset: -3px 50px;background: #42455a;transition: inset 350ms ease;z-index: -2;
}
button:hover::before{inset: -20px 0px;background: #00c2cb;
}
button::after{content: '';position: absolute;inset: 3px;border-radius: 10px;background: #22232e;z-index: -1;
}

请添加图片描述

涟漪微交互

我们将在单击按钮时为其添加涟漪效果。它可以位于按钮内或按钮周围。

我们将使用一些 JavaScript 来创建这种微交互。设置按钮样式后的 JavaScript 代码如下:

let btn = document.querySelectorAll("button");
btn.forEach((btn) => {btn.onclick = function (e) {let x = e.pageX - e.target.offsetLeft;let y = e.pageY - e.target.offsetTop;let ripples = document.createElement("span");ripples.style.left = x + "px";ripples.style.top = y + "px";this.appendChild(ripples);setTimeout(() => {ripples.remove();}, 2000);};
});

click 函数跟踪鼠标单击的 xy 位置并创建一个新<span>元素。每个都<span>代表一个涟漪,之后使用setTimeout()方法在两秒后将其删除。

我们使用 CSS 动画来更改其大小和不透明度。这将产生连锁反应。

button{position: relative;padding: 15px 45px;font-size: 1.5rem;border-radius: 15px;border: none;background: #00c2cb;color: #22232e;overflow: hidden;cursor: pointer;
}
button span {position: absolute;background: #004958;transform: translate(-50%,-50%);pointer-events: none;border-radius: 50%;animation: ripple 2s linear infinite;transition: 0.5s;
}@keyframes ripple {0% {width: 0;height: 0;opacity: 0.5;}100% {width: 500px;height: 500px;opacity: 0;}
}

请添加图片描述

发光

让按钮在悬停时发光。我们需要伪元素和box-shadow属性的组合。

<button><span class="btn-text">Click me</span></button>
button {display: flex;justify-content: center;align-items: center;background: transparent;position: relative;background: #22232e;border: none;border-radius: 15px;
}
button .btn-text{padding: 14px 45px;font-size: 25px;color: #e0ffff;border: 2px solid rgba(255,255,255,0.1);border-radius: 15px;backdrop-filter: blur(15px);background: rgba(0,73,88,0.05);cursor: pointer;z-index: 1;transition: 0.2s;
}

此时,我们应该有一个看起来很普通的按钮。要在底部添加栏,我们将使用::before伪元素:

button::before {content: '';position: absolute;left: 50%;transform: translateX(-50%);bottom: -5px;width: 25%;height: 10px;background: #00c2cb;border-radius: 10px;transition: .5s;box-shadow: 0 0 10px rgba(0,194,203,0.5);
}

添加box-shadow了就有了发光效果。

为了完成这个微交互,我们将增加悬停时伪元素的大小

button:hover::before {bottom: 0;height: 40%;width: 90%;border-radius: 30px;transition-delay: 0.5s;
}

整体代码:

button {display: flex;justify-content: center;align-items: center;background: transparent;position: relative;background: #22232e;border: none;border-radius: 15px;
}
button .btn-text{padding: 14px 45px;font-size: 25px;color: #e0ffff;border: 2px solid rgba(255,255,255,0.1);border-radius: 15px;backdrop-filter: blur(15px);background: rgba(0,73,88,0.05);cursor: pointer;z-index: 1;transition: 0.2s;
}
button::before{content: '';position: absolute;left: 50%;transform: translateX(-50%);bottom: -5px;width: 25%;height: 10px;background: #00c2cb;border-radius: 10px;transition: .5s;box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
button:hover::before{bottom: 0;height: 40%;width: 90%;border-radius: 30px;transition-delay: 0.5s;
}

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/22432.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Winform学习笔记(五)】引用自定义控件库(dll文件)

引用自定义控件库dll文件 前言正文1、生成dll文件2、选择工具箱项3、选择需要导入的dll文件4、确定需要导入的控件5、导入及使用 前言 在本文中主要介绍 如何引用自定义控件库(dll文件)。 正文 1、生成dll文件 通过生成解决方案 或 重新生成解决方案 生成 dll 文件 生成的…

小程序页面传递布尔值不起作用的解决方法

问题 传参&#xff1a; wx.navigateTo({url: ../mymeet/mymeeting-detail?isprincipaltrue, })以下方式使用时不起作用或出现问题&#xff1a; onLoad(options) {if (options.isprincipal) {...}//或者if (options.isprincipal true) {...} }原因 这种方式传参后isprinci…

如何发布自己的npm包

发布一个简单的npm包 首先创建一个文件夹&#xff08;唯一的命名&#xff09;创建package.json包&#xff0c;输出npm init&#xff0c;一直回车就好。创建index.js文件&#xff0c;向外暴露方法。 将包上传或更新到 npm 执行登录命令&#xff1a;npm login 登录npm官网&…

React Hooks 中的属性详解

React Hooks 是 React 16.8 版本中新增的特性&#xff0c;允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks&#xff0c;并附有详细的用法和代码示例。 1. useStat…

OPENCV C++(二)直方图+分离颜色通道+画圆画线画矩形

分离RGB彩图颜色通道 也就是把每种分量的亮度图提出来 vector<Mat> channels;split(image1, channels);Mat R channels.at(0);Mat G channels.at(1);Mat B channels.at(2); 这样R,G,B每个图就是这个图的颜色分量图了 图片的克隆&#xff0c;深拷贝&#xff01; Mat…

代码随想录算法训练营day56 583.两个字符串的删除操作 72.编辑距离

题目链接583.两个字符串的删除操作 class Solution {public int minDistance(String word1, String word2) {int len1 word1.length();int len2 word2.length();int[][] dp new int[len11][len22];for(int i 0; i <len1; i){dp[i][0] i;}for(int j 0; j <len2; j){…

正则表达式学习记录(Python)

正则表达式学习记录&#xff08;Python&#xff09; 一、特殊符号和字符 多个正则表达式匹配 &#xff08; | ) 用来分隔不同的匹配模式&#xff0c;相当于逻辑或&#xff0c;可以符合其中任何一个正则表达式 at | home # 表示匹配at或者home bat | bet | bit # 表示匹配bat或…

Java中的SPI机制与扫描class原理

文章目录 前言ClassLoaderJAVA SPI机制Spring SPI机制示例原理 如何加载jar包里的class 前言 Java的SPI机制与Spring中的SPI机制是如何实现的&#xff1f; ClassLoader 这里涉及到了class Loader的机制&#xff0c;有些复杂&#xff0c;jdk中提供默认3个class Loader&#x…

Dockerfile构建MySQL镜像

创建工作目录 [rootlocalhost ~]# mkdir mysql [rootlocalhost ~]# cd mysql/ 编写Dockerfile文件 [rootlocalhost mysql]# vim Dockerfile FROM centos:7 MAINTAINER Crushlinux <crushlinux163.com> #安装mariadb数据库 RUN yum install -y mariadb mariadb-server mar…

java与javaw运行jar程序

运行jar程序 一、java.exe启动jar程序 (会显示console黑窗口) 1、一般用法&#xff1a; java -jar myJar.jar2、重命名进程名称启动&#xff1a; echo off copy "%JAVA_HOME%\bin\java.exe" "%JAVA_HOME%\bin\myProcess.exe" myProcess -jar myJar.jar e…

AP AUTOSAR在软件定义汽车生态系统中的角色

AP AUTOSAR在软件定义汽车生态系统中的角色 AP AUTOSAR是AUTOSAR(汽车开放系统架构)的最新版本之一,它是一种面向服务的软件平台,旨在满足未来汽车电子系统的需求,特别是高性能计算、高带宽通信、软件无线更新(OTA)等方面。 AP AUTOSAR在软件定义汽车生态系统中扮演着…

【练手】自定义注解+AOP

在SpringBoot中实现自定义注解&#xff1a;( 声明注解的作用级别以及保留域 ) Target({ElementType.METHOD,ElementType.PARAMETER}) //注解的作用级别 Retention(RetentionPolicy.RUNTIME) //注解的保留域 public interface Log {int value() default 99; }在…

数据结构----异或

数据结构----异或 一.何处用到了异或 1. 运算符 //判断是否相同 用到了异或&#xff0c;看异或结果如果是0就是相同&#xff0c;不是0就是不同//注意&#xff1a; 不能给小数用&#xff0c;小数没有相等的概念&#xff0c;所以小数判断是否相同都是进行相减判断2.找一堆数中…

docker 部署mysql 5.6集群

docker搭建mysql的集群&#xff08;一主双从&#xff09; 1.拉取镜像 docker pull mysql:5.6 2.启动master容器 docker run -it -d --name mysql_master -p 3306:3306 --ip 192.168.162.100 \ -v /data/mysql_master/mysql:/var/lib/mysql \ -v /data/mysql_master/conf.d…

【无标题】云原生在工业互联网的落地及好处!

什么是工业互联网&#xff1f; 工业互联网&#xff08;Industrial Internet&#xff09;是新一代信息通信技术与工业经济深度融合的新型基础设施、应用模式和工业生态&#xff0c;通过对人、机、物、系统等的全面连接&#xff0c;构建起覆盖全产业链、全价值链的全新制造和服务…

eclipse常用快捷键

Eclipse常用快捷键 补全代码的声明&#xff1a;alt /快速修复: ctrl 1批量导包&#xff1a;ctrl shift o使用单行注释&#xff1a;ctrl /使用多行注释&#xff1a; ctrl shift /取消多行注释&#xff1a;ctrl shift \复制指定行的代码&#xff1a;ctrl alt down 或…

Scrum是什么意思,Scrum敏捷项目管理工具有哪些?

一、什么是Scrum&#xff1f; Scrum是一种敏捷项目管理方法&#xff0c;旨在帮助团队高效地开展软件开发和项目管理工作。 Scrum强调迭代和增量开发&#xff0c;通过将项目分解为多个短期的开发周期&#xff08;称为Sprint&#xff09;&#xff0c;团队可以更好地应对需求变…

微信小程序 width 100% 加 margin 或 padding 溢出屏幕

微信小程序 width 100% 加 margin 或 padding 溢出屏幕 方案1&#xff1a;fill-available margin方案2&#xff1a;box-sizing padding 方案1&#xff1a;fill-available margin width: 100%;width: -moz-available;width: -webkit-fill-available;width: fill-available;ma…

C#设计模式之---工厂方法模式

工厂方法模式&#xff08;Factory Method&#xff09; 工厂方法模式&#xff08;Factory Method&#xff09;的出现解决简单工厂中的难以拓展的问题&#xff0c;解决了其一旦添加新的产品&#xff0c;则需要修改简单工厂方法&#xff0c;进而造成简单工厂的实现逻辑过于复杂。…

聊聊混合动力汽车和纯电骑车的优势和劣势

混合动力汽车和纯电动骑车是两种不同的交通工具&#xff0c;它们都有各自的优势和劣势。本文将分别探讨混合动力汽车和纯电动骑车的优势和劣势&#xff0c;并为文章提供三个备选的好听的标题。 混合动力汽车是一种结合了内燃机和电动机的汽车&#xff0c;它可以同时利用燃油和电…