当前位置: 首页 > news >正文

有趣的按钮分享

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。

广告打完,我们进入正题,先看效果:
在这里插入图片描述
废话不多,上源码:

<button class="btn-shine"><span>Shine</span>
</button>
button {position: relative;margin: 0;padding: 17px 35px;outline: none;text-decoration: none;display: flex;justify-content: center;align-items: center;cursor: pointer;text-transform: uppercase;background-color: #fff;border: 1px solid rgba(22, 76, 167, 0.6);border-radius: 10px;color: #1d89ff;font-weight: 400;font-family: inherit;z-index: 0;overflow: hidden;transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}button span {color: #164ca7;font-size: 14px;font-weight: 500;letter-spacing: 0.7px;
}button:hover {animation: rotate624 0.7s ease-in-out both;
}button:hover span {animation: storm1261 0.7s ease-in-out both;animation-delay: 0.06s;
}@keyframes rotate624 {0% {transform: rotate(0deg) translate3d(0, 0, 0);}25% {transform: rotate(3deg) translate3d(0, 0, 0);}50% {transform: rotate(-3deg) translate3d(0, 0, 0);}75% {transform: rotate(1deg) translate3d(0, 0, 0);}100% {transform: rotate(0deg) translate3d(0, 0, 0);}
}@keyframes storm1261 {0% {transform: translate3d(0, 0, 0) translateZ(0);}25% {transform: translate3d(4px, 0, 0) translateZ(0);}50% {transform: translate3d(-3px, 0, 0) translateZ(0);}75% {transform: translate3d(2px, 0, 0) translateZ(0);}100% {transform: translate3d(0, 0, 0) translateZ(0);}
}.btn-shine {border: 1px solid;overflow: hidden;position: relative;
}.btn-shine span {z-index: 20;
}.btn-shine:after {background: #38ef7d;content: "";height: 155px;left: -75px;opacity: 0.4;position: absolute;top: -50px;transform: rotate(35deg);transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);width: 50px;z-index: -10;
}.btn-shine:hover:after {left: 120%;transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

相关文章:

有趣的按钮分享

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 广告打完&#xff0c;我们进入正题&#xff0c;先看效果&#xff1a; 废话不多&#xff0c;上源码&#xff1a; <button class&quo…...

论文阅读:YOLOV: Making Still Image Object Detectors Great at Video Object Detection

发表时间&#xff1a;2023年3月5日 论文地址&#xff1a;https://arxiv.org/abs/2208.09686 项目地址&#xff1a;https://github.com/YuHengsss/YOLOV 视频物体检测&#xff08;VID&#xff09;具有挑战性&#xff0c;因为物体外观的高度变化以及一些帧的不同恶化。有利的信息…...

如何将图片转为excel或word?(客户端)

演示软件&#xff1a;金鸣表格文字识别大师3.6.1&#xff08;新版本界面可能会略有不同&#xff09; 第一部分 将图片转为excel或文表混合的word 一般的软件要将图片转为可编辑的excel&#xff0c;都需要待识别的图片要有明显清晰的表格线&#xff0c;但我们程序现已克服了这…...

Linux网络——HTTP

一.应用层 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应用层. 我们上一次写的网络版本计算器就是一个应用层的网络程序。 我们约定了数据的读取&#xff0c;一端发送时构造的数据, 在另一端能够正确的进行解析, 就是ok的. 这种约定, 就是应…...

ElasticSearch综合练习题,ES为8版本,使用Kibana运行语句

文章目录 前言一、ES查询集群情况二、ES索引习题查询所有索引查询单个索引 三、ES增删改查数据单条处理批量处理 四、雇员查询练习题五、学生查询练习题六、商品信息联系题其他&#xff1a;一问一答参考文档 前言 ES8版本没有type概念&#xff0c;所以语法可能会与其他版本有差…...

Java方法中不使用的对象应该手动赋值为NULL吗?

在java方法中&#xff0c;不使用的对象是否应该手动赋值为null&#xff1f;我们先来通过一个示例看一下。 垃圾回收示例一 public class GuoGuoTest {public static void main(String[] args) {byte[] placeholder new byte[64 * 1024 * 1024];System.gc();} } 上面代码向内…...

Mysql主从搭建

Mysql主从搭建 1.Mysql下载1.1 查看操作系统2.2 下载mysql安装包 2.Mysql安装2.1 解压2.2 目录重命名2.3 创建data&#xff0c;存储文件2.4 创建用户组2.5 授权用户2.6 配置环境变量2.7 编辑my.cnf2.8 创建相关目录和文件2.9 初始化数据库2.10 复制mysql.server到/etc/init.d/下…...

WPF程序给按钮增加不同状态的图片

首先我们在资源里添加几个图片&#xff0c;Up&#xff0c;Over和Down状态。 然后我们创建一个Style。默认我们的背景设置成Up 然后在Triggers里添加代码&#xff0c;当Property&#xff1a;IsMouseOver为True的时候更换成Over&#xff1b;当Property&#xff1a;IsPressed为Tr…...

Java编程陷阱(三)

陷阱11:不要使用StringBuffer类来拼接字符串 StringBuffer是Java中的一个类,它可以表示一个可变的字符串,也就是可以对字符串进行修改和追加的操作,比如使用append或insert方法来拼接字符串。有时候,我们需要使用StringBuffer类来拼接字符串,比如在循环中动态地构建一个字…...

数据仓库相关

​在阿里巴巴的数据体系中&#xff0c;我们建议将数据仓库分为三层&#xff0c;自下而上为&#xff1a;数据引入层&#xff08;ODS&#xff0c;Operation Data Store&#xff09;、数据公共层&#xff08;CDM&#xff0c;Common Data Model&#xff09;和数据应用层&#xff08…...

SpringBoot学习笔记-创建个人中心页面(下)

笔记内容转载自 AcWing 的 SpringBoot 框架课讲义&#xff0c;课程链接&#xff1a;AcWing SpringBoot 框架课。 CONTENTS 1. 实现个人中心页面2. POJO时区修改3. 集成代码编辑器 本节实现个人中心的前端页面&#xff0c;用户能够查看自己的 Bot 信息&#xff0c;并能创建、修改…...

电子秤方案:做一个宠物勺方案设计

养宠物是一件费心劳力的事情&#xff0c;但同时也是能够给你带来快乐和幸福感的事情。就是有时候会怕宠物毫无征兆地生病令人措手不及&#xff0c;所以电子秤方案设计鼎盛合科技分享一个小方案&#xff0c;能够及时了解到宠物的身体状况问题。 蓝牙宠物勺是一种具有记录和称重…...

Debezium-Embedded 实时监控MySQL数据变更

1.Debezium-Embedded 简介 Debezium连接器的操作通常是将它们部署到Kafka Connect服务&#xff0c;并配置一个或多个连接器来监控上游数据库&#xff0c;并为它们在上游数据库中看到的所有更改生成数据更改事件。这些数据更改事件被写入Kafka&#xff0c;在那里它们可以被许多不…...

计算机是如何工作的(简单介绍)

目录 一、冯诺依曼体系 二、CPU基本流程工作 逻辑⻔ 电⼦开关——机械继电器(Mechanical Relay) ⻔电路(Gate Circuit) 算术逻辑单元 ALU&#xff08;Arithmetic & Logic Unit&#xff09; 算术单元(ArithmeticUnit) 逻辑单元(Logic Unit) ALU 符号 寄存器(Regis…...

JSP基本表单和Request对象使用例子

表单的jsp&#xff1b; <%page contentType"text/html;charsetgbk" pageEncoding"UTF-8"%> <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><titl…...

【Redux】Redux 基本使用

1. Redux 快速上手 Redux 是 React 最常用的集中状态管理工具&#xff0c;类似于Vue中的Pinia&#xff08;Vuex&#xff09;&#xff0c;可以独立于框架运行。 <button id"decrement">-</button> <span id"count">0</span> <…...

多线程Thread(初阶一:认识线程)

目录 一、引用线程的原因 二、线程的概念 三、进程和线程的区别 四、多线程编程 一、引用线程的原因 多任务操作系统&#xff0c;希望系统能同时运行多个任务。所以会涉及到进程&#xff0c;需要对进程进行管理、调度等。 而单任务操作系统&#xff0c;就完全不涉及到进程…...

系列五、GC垃圾回收【四大垃圾算法-复制算法】

一、堆的内存组成 二、复制算法 2.1、发生位置 复制算法主要发生在新生代&#xff0c;发生在新生代的垃圾回收也被叫做Minor GC。 2.2、 Minor GC的过程 复制>清空》交换 1、eden、from区中的对象复制到to区&#xff0c;年龄1 首先&#xff0c;当eden区满的时候会触发第一…...

LeetCode(24)文本左右对齐【数组/字符串】【困难】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 文本左右对齐 1.题目 给定一个单词数组 words 和一个长度 maxWidth &#xff0c;重新排版单词&#xff0c;使其成为每行恰好有 maxWidth 个字符&#xff0c;且左右两端对齐的文本。 你应该使用 “贪心算法” 来放置给定的单…...

Spring-Spring之事务底层源码解析

EnableTransactionManagement工作原理 开启Spring事务本质上就是增加了一个Advisor&#xff0c;但我们使用EnableTransactionManagement注解来开启Spring事务是&#xff0c;该注解代理的功能就是向Spring容器中添加了两个Bean&#xff1a; AutoProxyRegistrarProxyTransactio…...

NeoPixel灯环故障深度修复:从信号完整性到电源设计的嵌入式实践

1. 项目概述&#xff1a;从“小麻烦”到深度修复最近几周&#xff0c;我一直在愉快地捣鼓Adafruit的NeoPixel灯带和灯环&#xff0c;这东西确实好玩&#xff0c;单线控制、全彩可编程&#xff0c;简直是创客项目里的“瑞士军刀”。但就在我准备大干一场&#xff0c;用它们来打造…...

音乐网站与分享平台 |基于Springboot+vue的音乐网站与分享平台(源码+数据库+文档)​

音乐网站与分享平台 目录 基于Springbootvue的音乐网站与分享平台 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&#xf…...

Rust GraphQL实战:async-graphql深度解析

Rust GraphQL实战&#xff1a;async-graphql深度解析 引言 在Rust开发中&#xff0c;GraphQL是构建灵活API的重要技术。作为一名从Python转向Rust的后端开发者&#xff0c;我深刻体会到async-graphql在构建GraphQL服务方面的优势。async-graphql提供了类型安全的Schema定义和异…...

AMD APU异构计算与能效优化技术解析

1. 异构计算时代的能效革命&#xff1a;AMD APU技术深度解析 在半导体行业摸爬滚打十几年&#xff0c;我亲眼见证了处理器能效比从单纯依赖制程进步到架构创新的转变。2014年AMD提出的25x20计划&#xff08;到2020年实现APU能效提升25倍&#xff09;曾被视为天方夜谭&#xff0…...

GitHub MDC文件渲染优化:基于UserScript的Markdown预览增强方案

1. 项目概述&#xff1a;让GitHub读懂Cursor的“规则文件”如果你和我一样&#xff0c;是Cursor的深度用户&#xff0c;那你肯定没少和.mdc文件打交道。这些文件是Cursor AI的“规则集”&#xff08;Cursor Rules&#xff09;&#xff0c;本质上就是一份用Markdown语法写的项目…...

图片换背景底色怎么制作?一款微信小程序让你3步搞定

最近在抖音和小红书上刷到不少博主分享换背景的小技巧&#xff0c;我也趁机研究了一遍&#xff0c;发现现在换背景底色真的比以前方便多了。不管是证件照换底色、商品图去背景&#xff0c;还是日常自拍的背景替换&#xff0c;都有办法解决。今天就把我的使用心得分享给你们&…...

Cursor Pro激活终极指南:深度解析多平台无限制使用方案

Cursor Pro激活终极指南&#xff1a;深度解析多平台无限制使用方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your tr…...

从古代数学到信息学奥赛:秦九韶算法如何帮你秒杀多项式计算题?

从古代数学到信息学奥赛&#xff1a;秦九韶算法如何帮你秒杀多项式计算题&#xff1f; 在杭州西湖畔的岳王庙旁&#xff0c;矗立着一块刻有"大衍求一术"的石碑&#xff0c;这是南宋数学家秦九韶留给后人的智慧结晶。当我们今天面对一道看似普通的多项式计算题时&…...

面向少儿的 AI 背单词 APP开发

开发一款面向少儿的 AI 背单词 APP&#xff0c;核心在于将“机械记忆”转化为“交互式探索”。结合 2026 年主流的 AI 智能体技术&#xff0c;其主要功能可以归纳为以下几个维度。1. 沉浸式动态语境生成不同于传统的静态例句&#xff0c;AI 会根据孩子的兴趣&#xff08;如恐龙…...

ARM微服务器与异构计算:从欧洲实验室到现代数据中心的演进

1. 项目概述&#xff1a;欧洲实验室里的微服务器“新酿”最近在整理资料时&#xff0c;翻到一篇2014年EE Times的老报道&#xff0c;讲的是当时欧洲几个由欧盟资助的微服务器项目。虽然时间过去快十年了&#xff0c;但里面探讨的一些架构思路和设计哲学&#xff0c;在今天看来依…...