html+css 实现文字滚动的按钮

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

文章目录

  • 效果
  • 原理解析
    • 1.给每一个按钮添加一个hover效果,并初始化一个==animation动画效果==。
    • 2.当按钮上有鼠标时,hover效果触发,触发文字移动效果。
    • 3.具体的变换参数,直接==看代码==,可以一键复制,查看效果
  • 上代码,可以直接复制使用
    • 目录
    • html
    • css

效果

文字滚动按钮效果展示

原理解析

1.给每一个按钮添加一个hover效果,并初始化一个animation动画效果

animation: marquee 1s linear infinite;

2.当按钮上有鼠标时,hover效果触发,触发文字移动效果。

/*当hover时的变化*/
.btnMar:hover .marquee__inner {animation-play-state: running;opacity: 1;transition-duration: 0.4s;
}
.btnMar:hover>span {opacity: 0;
}

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

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

目录

文字滚动目录

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 实现文字滚动的按钮</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 实现文字滚动的按钮</h1><div class="wrapper"><button class="butdef btnMar"><span>求点赞</span><div class="marquee" aria-hidden="true"><div class="marquee__inner"><span>求点赞</span><span>求点赞</span><span>求点赞</span><span>求点赞</span></div></div></button><button class="butdef btnMar"><span>求关注</span><div class="marquee" aria-hidden="true"><div class="marquee__inner"><span>求关注</span><span>求关注</span><span>求关注</span><span>求关注</span></div></div></button><button class="butdef btnMar"><span>求收藏</span><div class="marquee" aria-hidden="true"><div class="marquee__inner"><span>求收藏</span><span>求收藏</span><span>求收藏</span><span>求收藏</span></div></div></button><button class="butdef btnMar"><span>求转发</span><div class="marquee" aria-hidden="true"><div class="marquee__inner"><span>求转发</span><span>求转发</span><span>求转发</span><span>求转发</span></div></div></button></div>
</div></body>
</html>

css

*
{margin: 0;padding: 0;box-sizing: border-box;
}
:root
{--btn-bg-color:#fff;--font-color-black: #000;--btn-bg-color-hover: #FF5833;
}
.container{min-height: 100vh;background-color: #0e1538;
}
.wrapper{display: flex;flex-direction: column;align-items: center;gap:40px;
}
.butdef {pointer-events: auto;cursor: pointer;background: var(--btn-bg-color);border: none;padding: 15px 30px;margin: 0;font-family: inherit;font-size: inherit;position: relative;display: inline-block;
}.butdef::before,
.butdef::after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}.btnMar {font-family: "微软雅黑", sans-serif;font-weight: 500;
}.btnMar>span {display: inline-block;
}.marquee {position: absolute;top: 0;left: 0;width: 100%;overflow: hidden;pointer-events: none;
}.marquee__inner {width: fit-content;display: flex;position: relative;--offset: 1rem;--move-initial: calc(-25% + var(--offset));--move-final: calc(-50% + var(--offset));transform: translate3d(var(--move-initial), 0, 0);animation: marquee 1s linear infinite;animation-play-state: paused;opacity: 0;
}.marquee span {text-align: center;white-space: nowrap;font-style: italic;padding: 15px 5px;
}@keyframes marquee {0% {transform: translate3d(var(--move-initial), 0, 0);}100% {transform: translate3d(var(--move-final), 0, 0);}
}/*当hover时的变化*/
.btnMar:hover .marquee__inner {animation-play-state: running;opacity: 1;transition-duration: 0.4s;
}
.btnMar:hover>span {opacity: 0;
}

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

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

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

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

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

相关文章

手摸手教你前端和后端是如何实现导出 Excel 的?

前言 大家好呀&#xff0c;我是雪荷。在上篇文章&#xff08;EasyExcel 初使用—— Java 实现多种写入 Excel 功能-CSDN博客&#xff09;中给大家介绍了 Java 是如何写入 Excel 的&#xff0c;那么这篇算是对上篇文章的拓展&#xff0c;主要介绍前端和后端分别是如何导出数据至…

代码随想录训练营 Day18打卡 二叉树 part06 530. 二叉搜索树的最小绝对差 501. 二叉搜索树中的众数 236. 二叉树的最近公共祖先

代码随想录训练营 Day18打卡 二叉树 part06 一、 力扣530. 二叉搜索树的最小绝对差 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 示例 &#xff1a; 输入&#xff1a; …

spring boot + vue3 接入钉钉实现扫码登录

1&#xff1a;准备工作 1.1&#xff1a;进入钉钉开放平台创建开发者应用。应用创建和类型介绍&#xff0c;参考下方。 应用类型介绍 - 钉钉开放平台 (dingtalk.com) 应用能力介绍 - 钉钉开放平台 (dingtalk.com) 扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com) 1.2&…

KaiwuDB 产品总监李月飞:让中国物联网用上放心的数据库产品

​2024年7月17日&#xff0c;KaiwuDB 产品总监李月飞受邀于 2024 可信数据库发展大会“能源与政务数据库应用创新”分论坛发表演讲。以下是李月飞主题演讲《深耕数据良田&#xff0c;KaiwuDB 洞见能源产业数字新生力》精华实录。 数据&#xff0c;给能源变革带来新的可能 众所…

TypeScript 简介

文档 typeScript官网中文文档&#xff1a;https://www.tslang.cn/index.html中文文档(简洁点)&#xff1a;https://typescript.bootcss.comMDN 前言 JavaScript 引入编程社区已有 20 多年&#xff0c;如今已成为有史以来使用最广泛的跨平台语言之一。JavaScript 最初是一种用…

SSL VPN详细概述

为什么会出现SSL VPN呢&#xff1f;在这之前不是有IPSEC VPN吗&#xff1f; 通过这两个问题我们可以发现多半是IPSEC VPN在某些方面肯定有所欠缺&#xff0c;所以后面在出现了SSL VPN。 之前说过根据组网方式划分&#xff0c;可以分为 client to LAN 和 LAN to LAN 两种 而…

CTF学习笔记汇总(非常详细)零基础入门到精通,收藏这一篇就够了

CTF学习笔记汇总 Part.01 Web 01 SSRF 主要攻击方式如下&#xff1a; 01 对外网、服务器所在内网、本地进行端口扫描&#xff0c;获取一些服务的banner信息。 02 攻击运行在内网或本地的应用程序。 03 对内网Web应用进行指纹识别&#xff0c;识别企业内部的资产信息。 …

深入分析 Android ContentProvider (十二)

文章目录 深入分析 Android ContentProvider (十二)Android 中 ContentProvider 的系统代码分析&#xff08;续&#xff09;1. ContentProvider 的内部实现机制1.1. ContentProvider 的创建与生命周期管理1.2. ContentProvider 的数据访问与处理1.3. ContentProvider 的权限管理…

Go语言---sync.WaitGroup

在Go语言中&#xff0c;给我们提供了用于线程同步的sync.WaitGroup&#xff0c;简单来讲&#xff0c;WaitGroup就是指等待一组&#xff0c;等待一个系列执行完成后才会继续向下执行。 WaitGroup数据结构 type WaitGroup struct {noCopy noCopystate atomic.Uint64 // 高 32 b…

无人驾驶的未来:AI如何重塑我们的出行世界

无人驾驶汽车&#xff0c;作为人工智能&#xff08;AI&#xff09;技术的集大成者&#xff0c;正以前所未有的速度改变着我们的出行方式。从机器学习到计算机视觉&#xff0c;再到人工智能生成内容&#xff08;AIGC&#xff09;&#xff0c;AI技术的每一次进步都在为无人驾驶汽…

华为手机连接电脑后电脑无反应、检测不到设备的解决方法

本文介绍华为手机与任意品牌电脑连接时&#xff0c;出现连接后电脑无反应、检测不到手机连接情况的解决方法。 最近&#xff0c;因为手机的存储空间愈发紧缺&#xff0c;所以希望在非华为电脑中&#xff0c;将华为手机内的照片、视频等大文件备份、整理一下。因此&#xff0c;需…

公司里的IT是什么?

公司里的IT是什么&#xff1f; 文章目录 公司里的IT是什么&#xff1f;1、公司里的IT2、IT技术3、IT行业4、IT行业常见证书 如果对你有帮助&#xff0c;就点赞收藏把&#xff01;(&#xff61;&#xff65;ω&#xff65;&#xff61;)&#xff89;♡ 前段时间&#xff0c;在公…

《Windows API每日一练》24.1 WinSock简介

本节将逐一介绍WinSock的主要特性和组件&#xff0c;套接字、WinSock动态库的使用。 本节必须掌握的知识点&#xff1a; Windows Socket接口简介 Windows Socket接口的使用 第178练&#xff1a;网络时间校验 24.1.1 Windows Socket接口简介 ■以下是WinSock的主要特性和组件…

实时转换,轻松编辑:2024年高效语音转文字解决方案

现在生活节奏越来越快了&#xff0c;很多时候一场会议内容的信息量就会呈几何式增长。用笔来记录肯定来不及&#xff0c;那还有一个方法就是录音或者录像。录制完成后我们可以使用语音转文字来快速获取会议内容是不是就方便了很多。 1.365在线转文字 链接传送&#xff1a;ww…

华为云依赖引入错误

问题&#xff1a;记录一次项目加载华为云依赖错误&#xff0c;如下&#xff1a; 错误信息&#xff1a;Could not find artifact com.huawei.storage:esdk-obs-java:pom:3.1.2.1 in bintray-qcloud-maven-repo (https://dl.bintray.com/qcloud/maven-repo/) 找到本地仓库&#…

【practise】string_atoi

今天来分享一道比较平常的练习题&#xff0c;说实话我自己写了半天&#xff0c;自己写的很烂最后还是看的答案… 1.题目概要 题目链接&#xff1a;LINK 2.题目难点 这个题目有两个难点&#xff0c;如下&#xff1a; 拿到了全部都是数字字符的字符串&#xff0c;怎么将这个…

从技术角度解读【与辉同行】文案(一)

视频文字内容 标题&#xff1a;走晋.山西 内容&#xff1a;将一段岁月熔成佳酿&#xff0c;三晋儿女荡气回肠。捧一把黄土架起火柴&#xff0c;华夏大地照亮火光。五千年黄土风云&#xff0c;历代千秋根固魂盈。三万顷汾河烟雨&#xff0c;唐风宋韵人杰地灵。当先辈手持石器抛挖…

秘密打造「AI陶哲轩」 震惊数学圈!谷歌IMO梦之队首曝光,菲尔兹奖得主深度点评

谷歌DeepMind正在做的&#xff0c;是要打造出世界上最强的AI数学家。 Perplexity AI的CEO对此做出了大胆预测——DeepMind继续研究下去的话&#xff0c;应该可以搞出一个「AI陶哲轩」了&#xff01; 这个预测可谓相当大胆。 要知道&#xff0c;陶哲轩在IMO竞赛圈&#xff0c;乃…

ADI - 通过5 V至24 V输入提供双极性、双向DC-DC流入和流出电流

大部分电子系统都依赖于正电压轨或负电压轨&#xff0c;但是有些应用要求单电压轨同时为正负电压轨。在这种情况下&#xff0c;正电源或负电源由同一端子提供&#xff0c;也就是说&#xff0c;电源的输出电压可以在整个电压范围内调节&#xff0c;并且可以平稳转换极性。例如&a…

【CORS 报错】跨域请求问题:CORS 多种环境下的解决方案

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、CORS错误的常见原因二、解决方案1. Vue3 Vite项目下的解决方案创建Vue3 Vite项目配置Vite的代理发送请求 2. jQuery项目下的解决方案使用CORS请求头使用JSONP 3. 其他环境下的解决方案使用服务器端代理设置CORS头使用…