html+css+js hover流光效果按钮

news2024/11/14 13:43:43

前言:哈喽,大家好,今天给大家分享html+css 绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕

文章目录

  • 效果
  • 原理解析
    • 1.这个效果看似是边框有渐变流光变化,实则是==背景渐变在变化==,如下看图。
    • 2.具体的变换参数,直接==看代码==,可以一键复制,查看效果
  • 上代码,可以直接复制使用
    • 目录
    • html
    • css
    • javascript

效果

hover刘刚按钮效果

原理解析

1.这个效果看似是边框有渐变流光变化,实则是背景渐变在变化,如下看图。

原理分析gif图

2.具体的变换参数,直接看代码,可以一键复制,查看效果

上代码,可以直接复制使用

目录

流光目录

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html+css+js hover流光效果按钮</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
    <h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">
        html+css+js hover流光效果按钮</h1>

    <div class="wrapper">
        <a href="#">
            <i></i>
            <i></i>
            <span>求点赞</span>
        </a>
        <a href="#">
            <i></i>
            <i></i>
            <span>求关注</span>
        </a>
        <a href="#">
            <i></i>
            <i></i>
            <span>求收藏</span>
        </a>
        <a href="#">
            <i></i>
            <i></i>
            <span>求转发</span>
        </a>
    </div>
</div>

<script src="main.js"></script>
</body>
</html>

css

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root
{
  --x: 45deg;
}
.container{
  min-height: 100vh;
  background-color: #0e1538;
}
.wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:40px;
}
a
{
  position: relative;
  width: 150px;
  height: 55px;
  display: inline-block;
  border-radius: 5px;
}

a i
{
  position: absolute;
  inset: -2px;
  display: block;
  border-radius: 5px; 
}

a i,
a i:nth-child(2)
{
  background: linear-gradient(var(--x), #00ccff, #0e1538,#0e1538, #d400d4); 
}

a i:nth-child(2)
{
  filter: blur(10px);
}

a span
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; 
  align-items: center; 
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  border: 1px solid #040a29;
  border-radius: 3px; 
  background-color: rgba(14, 21, 26, .65);
  overflow: hidden; 
}

a span::before
{
  content: '';
  position: absolute;
  top:0;
  left: -50%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .075);
  transform: skew(25deg) ;
}

javascript

const btn = document.querySelectorAll('a')
btn.forEach(element => {
  element.addEventListener('mousemove', e => {
    const rect = e.target.getBoundingClientRect()
    const x = e.clientX * 3 - rect.left
    element.style.setProperty('--x', x + 'deg')
  })
})

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕

整理不易,点赞关注宝码香车

更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作

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

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

相关文章

记录某次“有趣的“挖矿木马排查

挖矿木马是什么&#xff1f; 挖矿木马是一种恶意软件&#xff0c;它在用户不知情或未经同意的情况下&#xff0c;利用受害者的计算机资源进行加密货币挖矿。这类软件通过执行大量运算来挖掘数字货币&#xff0c;如比特币或门罗币等。挖矿木马通常通过漏洞利用、弱口令爆破或非…

探索电商 API 接口的创新应用与接入技巧

在当今数字化的商业环境中&#xff0c;电商 API 接口已成为推动业务增长和创新的关键因素。它们不仅为企业提供了与电商平台高效交互的途径&#xff0c;还开启了无数创新应用的可能性。本文将深入探讨电商 API 接口的创新应用&#xff0c;并分享一些实用的接入技巧&#xff0c;…

python---为某个项目使用虚拟环境

目录 为什么要为项目建立虚拟环境建立步骤打开终端&#xff08;Terminal&#xff09;进入项目文件夹所在目录该目录下创建虚拟环境激活新建的虚拟环境安装本项目所需要的库 过程完整截图未来再次使用本虚拟环境先导航到项目目录然后激活虚拟环境 为什么要为项目建立虚拟环境 为…

Excel 通过函数实现数据透视表

函数技巧演示系列。深入介绍 Excel 函数的使用技巧。 本篇通过函数的方式&#xff0c;实现数据透视表&#xff0c;部分函数需要 Office 2021版本或者 Office 365 版。 示例数据 要求&#xff1a;基于产品名称&#xff08;E列&#xff09;和销售渠道&#xff08;G列&#xff09…

代码随想录——买卖股票最佳时机Ⅲ(Leetcode 123)

题目链接 动态规划 动态规划思路&#xff1a; 确定dp数组以及下标的含义 一天一共就有五个状态&#xff0c; 没有操作 &#xff08;其实我们也可以不设置这个状态&#xff09;第一次持有股票第一次不持有股票第二次持有股票第二次不持有股票 dp[i][j]中 i表示第i天&#xf…

医院综合绩效核算系统,绩效核算系统源码,采用springboot+avue+MySQL技术开发,可适应医院多种绩效核算方式。

一、系统概述 作为医院用综合绩效核算系统&#xff0c;系统需要和his系统进行对接&#xff0c;按照设定周期&#xff0c;从his系统获取医院科室和医生、护士、其他人员工作量&#xff0c;对没有录入信息化系统的工作量&#xff0c;绩效考核系统设有手工录入功能&#xff08;可…

论文速递|Management Science 6月文章合集

编者按&#xff1a; 在本系列文章中&#xff0c;我们梳理了运筹学顶刊MSOM在2024年6月份发布的7篇文章的基本信息&#xff0c;旨在帮助读者快速洞察行业最新动态。 文章1 题目 Promotional Inventory Displays: An Empirical Analysis Using IoT Data促销库存展示&#xff1…

dubbo调用知多少?

一 dubbo超时时间的设置 定义&#xff1a;这里说的超时&#xff0c;是针对dubbo provider调用方来说的&#xff0c;比如提供方执行需要3秒&#xff0c;设置了超时时间1秒&#xff08;默认&#xff09;&#xff0c;则consumer调用方会报超时错误&#xff0c;但实际上服务提供方…

抖音短视频矩阵管理:就靠它,让运营更高效

在数字化时代&#xff0c;短视频已成为连接创作者与观众的重要桥梁。抖音作为全球领先的短视频平台&#xff0c;汇聚了海量的创作者和用户。然而&#xff0c;随着个人或品牌账号的增多&#xff0c;如何高效地管理这些抖音短视频矩阵&#xff0c;成为了一个亟待解决的问题。本文…

气膜游乐园:孩子们的新乐园—轻空间

随着科技的发展和人们对健康、安全娱乐环境的重视&#xff0c;气膜建筑逐渐成为游乐休闲项目中的新选择。作为这种创新建筑的一种应用形式&#xff0c;气膜游乐园正在越来越多地受到家庭和孩子们的欢迎。它不仅提供了一个安全、舒适的玩乐空间&#xff0c;还创造了丰富多样的活…

什么牌子的洗地机好用?推荐多款质量好洗地机的品牌

近些年大家对家庭生活环境的舒适和健康越来越重视&#xff0c;然而家务活的种类繁多&#xff0c;每次都要耗费大量的时间和精力&#xff0c;就拿擦地来说&#xff0c;每次都需要先扫地&#xff0c;再擦地&#xff0c;然后中间可能还要多次洗拖布等&#xff0c;十分繁琐。 因此…

数据分析:两组数据的T检验power评估

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 介绍 功效分析&#xff08;power analysis&#xff09;是在实验设计阶段进行的&#xff0c;用于确定在给定的效应量、显著性水平和样本大小下&#xff0c;实验能…

mysql进阶语法

mysql高阶语句 高级语法的查询语句 先创建库和表 排序语法&#xff0c;关键字排序 升序和降序 默认的排序方式就是降序 升&#xff1a;ASC 降序&#xff1a;DESC 配合&#xff1a;order by语法 降序排列&#xff1a;要指定列 select * from 数字 多个列升序 如果以…

三星电子推出性能更强、容量更大的升级版1TB microSD 存储卡

microSD 存储卡 PRO Plus 和 EVO Plus 采用三星先进的 V-NAND 技术&#xff0c;可安全可靠地捕捉和存储日常瞬间 性能提升后&#xff0c;顺序读取速度高达 180MB/s&#xff0c;传输速度达 160MB/s&#xff0c;可轻松处理较大文件 韩国首尔--2024年7月31日--三星电子宣布推出1…

中职软件测试实训室

在当今信息化高速发展的时代&#xff0c;软件作为信息技术的核心&#xff0c;其质量直接关系到用户的使用体验和企业的市场竞争力。因此&#xff0c;软件测试作为保障软件质量的重要环节&#xff0c;越来越受到业界的重视。为了满足社会对软件测试人才的需求&#xff0c;中职教…

springboot闲置图书分享boot--论文源码调试讲解

第2章 程序开发技术 2.1 Mysql数据库 开发的程序面向用户的只是程序的功能界面&#xff0c;让用户操作程序界面的各个功能&#xff0c;那么很多人就会问&#xff0c;用户使用程序功能生成的数据信息放在哪里的&#xff1f;这个就需要涉及到数据库的知识了&#xff0c;一般来说…

object的defineProperty与Proxy对比

Object.defineProperty 循环执行Object.defineProperty方法遍历对象的每一个属性&#xff0c;给每一个属性增加get和set方法&#xff0c;使得我们在读取和设置属性值的时候都会被Vue给监听到&#xff0c;从而去做一些其他的操作。 代码示例&#xff1a; let obj {a:1,b:2,c:…

善于运用facebook自动化规则,将节省你50%的时间

许多facebook广告投手都会花大量时间在盯盘看数据上&#xff0c;从而导致没有太多时间和精力去做广告素材的优化&#xff0c;其实常规的一些数据盯盘都可以交给facebook自动化规则&#xff0c;包括增减预算&#xff0c;暂停广告等&#xff0c;合理运用自动化规则&#xff0c;可…

前端必知必会-html表单元素

文章目录 HTML 表单元素HTML <form> 元素<input> 元素<label> 元素<select> 元素<option> 元素定义一个可选择的选项。<textarea> 元素<button> 元素<fieldset> 和 <legend> 元素<datalist> 元素<output> 元…

Aker ASA引领行业变革,旗下互联网投融资平台重磅起航

全球领先的海洋科技公司 Aker ASA 正式宣布,将于近期推出其全新的互联网海洋产业投融资平台。这一平台的推出标志着Aker ASA在海洋资源开发和投融资领域的又一重大进展,旨在为投资者提供创新、可靠的投资机会,同时推动海洋产业的可持续发展。 Aker ASA 作为行业内的领导者,以其…