html实现一个一闪一闪的按钮，CSS实现一个一闪一闪的按钮，Css闪烁点标，css设置按钮层次感，css按钮美化，CSS按钮动画过渡，CSS按钮添加阴影
效果
动态
静态
实现
底部多加了几个过渡按钮
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#app {margin: 2% auto;text-align: center;}.lay-btn-box {position: relative;display: inline-block;margin-top: 30px;}.lay-btn {background: #59b0fb;border-radius: 50%;display: inline-block;width: 100px;height: 100px;color: white;font-size: 20px;line-height: 100px;text-align: center;box-shadow: #0000007a 0px 0px 10px 0;cursor: pointer;position: relative;}.lay-out-ripples {opacity: 1;pointer-events: none;border-radius: 2px;--lay-ripple-color: #59b0fb;--lay-spread-width: 25px;display: inline-block;width: 100px;height: 100px;border-radius: 50%;position: absolute;left: 0;top: 0;}.lay-out-ripples-static {pointer-events: none;border-radius: 2px;box-shadow: 0 0 0 15px #59b0fb;display: inline-block;width: 100px;height: 100px;border-radius: 50%;position: absolute;opacity: 0.1;}.lay-animate-always-out {animation: lay-ripple-effect 2s infinite;}@keyframes lay-ripple-effect {0% {box-shadow: 0 0 0 0 var(--lay-ripple-color);opacity: .4;}100% {box-shadow: 0 0 0 var(--lay-spread-width) var(--lay-ripple-color);opacity: 0;}}/** 过渡动画*/.lay-btn-anim {box-shadow: none;transition: all 0.6s;-webkit-transition: all 0.6s;}.lay-btn-anim-1:hover {box-shadow: #0000007a 0px 0px 10px 0;}.lay-btn-anim-2:hover {box-shadow: inset 0 0 20px 0 #cee8ff;}.lay-btn-anim-3:hover {box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.2) inset;}.lay-btn-anim-4:hover {box-shadow: 0 0 0 10px #59b0fb inset, 0 0 0 60px rgba(0, 0, 0, 0.5) inset;}.lay-btn-anim-5:hover {box-shadow: 80px 0 0 0 rgba(0, 0, 0, 0.25) inset, -80px 0 0 0 rgba(0, 0, 0, 0.25) inset;}.lay-btn-anim-6:hover {box-shadow: 0 80px 0 0 rgba(0, 0, 0, 0.25) inset, 0 -80px 0 0 rgba(0, 0, 0, 0.25) inset;}.lay-btn-anim-7:hover {box-shadow: 0 -120px 0 0 rgba(0, 0, 0, 0.5) inset;}.lay-btn-anim-8:hover {box-shadow: 120px 0 0 0 rgba(0, 0, 0, 0.5) inset;}</style></head><body><div id="app"><!-- 动态--><div class="lay-btn-box"><div class="lay-out-ripples lay-animate-always-out"></div><div class="lay-btn">打卡</div></div><br /><!-- 静态--><div class="lay-btn-box"><div class="lay-out-ripples-static"></div><div class="lay-btn">打卡</div></div><br /><!-- 外阴影--><div class="lay-btn-box"><div class="lay-btn" style="box-shadow: #0000007a 0px 0px 10px 0;">打卡</div></div><br /><!-- 内阴影1--><div class="lay-btn-box"><div class="lay-btn" style="box-shadow: inset 0 0 20px 0 #9fd2ff;background: none;color: #59b0fb;">打卡</div></div><br /><!-- 内阴影2--><div class="lay-btn-box"><div class="lay-btn" style="box-shadow: inset 0 0 20px 0 #cee8ff;">打卡</div></div><br /><!-- 动画--><div class="lay-btn-box"><div class="lay-btn lay-btn-anim lay-btn-anim-1">打卡</div></div><br /><div class="lay-btn-box"><div class="lay-btn lay-btn-anim lay-btn-anim-2">打卡</div></div><br /><div class="lay-btn-box"><div class="lay-btn lay-btn-anim lay-btn-anim-3">打卡</div></div><br /><div class="lay-btn-box"><div class="lay-btn lay-btn-anim lay-btn-anim-4">打卡</div></div><br /><div class="lay-btn-box"><div class="lay-btn lay-btn-anim lay-btn-anim-5">打卡</div></div><br /><div class="lay-btn-box"><div class="lay-btn lay-btn-anim lay-btn-anim-6">打卡</div></div><br /><div class="lay-btn-box"><div class="lay-btn lay-btn-anim lay-btn-anim-7">打卡</div></div><br /><div class="lay-btn-box"><div class="lay-btn lay-btn-anim lay-btn-anim-8">打卡</div></div></div></body></html>
相关文章：
html实现一个一闪一闪的按钮，CSS实现一个一闪一闪的按钮，Css闪烁点标，css设置按钮层次感，css按钮美化，CSS按钮动画过渡，CSS按钮添加阴影
效果 动态 静态 实现 底部多加了几个过渡按钮 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style>#app {margin: 2% auto;text-align: center;}.lay-btn-box {position: relative;display: …...
品优购项目学习记录04--列表页
文章目录 1.品优购项目列表页制作准备工作2.列表页header和nav修改2.1 秒杀logo的制作2.2 导航栏nav修改 3.列表页主体sk_container 1.品优购项目列表页制作准备工作 1.列表页面是新的页面，我们需要新建页面文件list.html 2.因为列表页的头部和底部基本一致&#x…...
script标签type值application/json，importmap和module
type（默认text/javascript） 该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型（媒体类型）； 如果没有定义这个属性，脚本会被视作 JavaScript。 如果 MIME 类型不是 JavaScript 类型&a…...
基于ArcGIS实现陕西省1:250000比例尺地形图分幅和编号
1地形图的分幅与编号原理 我国1:1000000地形图的分幅采用国际1:1000000地图分幅标准，而其他比例尺地形图分幅以1:1000000比例尺地形图为基准进行分幅。每幅1:1000000地形图范围是经差6、纬差4；纬度60~ 76之间经差12、纬差4；纬度76~ 88之间经…...
校园安全，一键报警主机助力保障
校园安全，一键报警主机助力保障 随着社会发展和科技进步，校园安全问题日益受到重视。如何保障师生们的安全成为了学校一项重要任务。而校园可视一键报警主机就是一种非常有效的安保设备。 这种报警主机集合了视频监控、安全防范、数据处理等多个功能&a…...
RabbitMQ养成记 （7. 消息可靠性投递）
消息可靠性 什么是消息的可靠性呢？？ 简单来说就是 你的消息发放给 exchange 这个过程中 有可能丢失或者失败 这时候需要一个回调机制来监控 发送结果 必要时还要返回信息。 rabbitmq 给我们提供了两种： 首先是生产者到exchange发送过程的监…...
SpringBoot配置连接两个或多个数据库
在Spring Boot应用中连接多个数据库或数据源可以使用多种方式，下面介绍两种常用的方法： 1、使用Spring Boot官方支持的多数据源配置 Spring Boot提供了官方支持的多数据源配置，可以简单地配置和管理多个数据源。 需要在application.proper…...
Python面试题汇总：高效备战技巧
Python面试题汇总：高效备战技巧 一、基础知识准备1 语言特点及优缺点2 数据类型3 运算符4 控制流程语句5 函数 二、面向对象编程1 面向对象编程基础2 类的创建及继承3 魔术方法4 多态5 设计模式 三、常用数据结构与算法1 字符串、列表、字典、集合字符串列表字典集合…...
如何区分比特率、波特率和频谱带宽？
01、什么是比特率和波特率？ 宽带网络里面提及的千兆即1000Mbit/s，一般描述的是我们家网络端口每秒最大可接收0、1比特（bit）的数量，即每秒可接收1000x106个比特。显而易见，比特率越高，每秒传送的…...
sklearn中的特征工程（过滤法、嵌入法和包装法）
目录 编辑特征工程的第一步：理解业务 Filter过滤法 编辑方差过滤 编辑- 相关性过滤 - 卡方过滤 - F检验 - 互信息法 编辑嵌入法（Embedded） 包装法（Wrapper） 特征工程的第一步：理解业务 如…...
Linux C/C++并发编程实战（0）谈谈并发与并行
作为并发编程的第一讲，比较轻松，我们先来谈谈什么是并发和并行。 并发（Concurrency）是指一个处理器同时处理多个任务。 并行（Parallelism）是指多个处理器或者是多核的处理器同时处理多个不同的任务。 并发…...
2023年5月天津/南京/成都/深圳CDGA/CDGP数据治理认证报名
6月18日DAMA-CDGA/CDGP数据治理认证考试开放报名中！ 考试开放地区：北京、上海、广州、深圳、长沙、呼和浩特、杭州、南京、济南、成都、西安。其他地区凑人数中… DAMA-CDGA/CDGP数据治理认证班进行中，报名从速！ DAMA认证为数据管…...
【MySQL】MySQL批量插入测试数据的几种方式
文章目录 前言一、表二、使用函数生成设置允许创建函数产生随机字符串产生随机数字 三、创建存储过程插入角色表插入用户表 四、执行存储过程小结五、使用 Navicat自带的数据生成 前言 在开发过程中我们不管是用来测试性能还是在生产环境中页面展示好看一点, 又或者学习验证某…...
PowerShell install 一键部署virtualbox
VirtualBox 前言 VirtualBox 是一款开源虚拟机软件。VirtualBox 是由德国 Innotek 公司开发，由Sun Microsystems公司出品的软件，使用Qt编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。Innotek 以 GNU General Public Licens…...
CTF权威指南 笔记 -第四章Linux安全机制-4.1-Stack Canaries
目录 Stack Canaries 简介 我们进行简单的例子 64 32 checksec Stack Canaries 是对抗栈溢出攻击的技术 SSP安全机制 Canary 的值 栈上的一个随机数 在程序启动时 随机生成并且保存在比返回地址更低值 栈溢出是从低地址向高地址进行溢出 如果攻击者要攻击 就一定要覆…...
KDZD400Q便携式三氯乙烯浓度检测仪
一、产品概述 检测仪用于快速检测多种气体浓度、温湿度测量并超标报警的场合。采用2.31寸高清彩屏实时显示，选用进口品牌的气体传感器，主要检测原理有：电化学、红外、催化燃烧、热导、PID 光离子等。 可以检测管道中或受限空间、大气环境中的…...
C++11 部分新特性
1. 关键字和语法 1.1 nullptr 空指针，能够和整数0进行区别，因为#define NULL 0 1.2 类中非静态成员变量定义时初始化 & 初始化列表 1.3 auto 可推导出右值类型，从而得知左边变量类型。 简单使用示例： auto func() {retur…...
selenium通过performance log获取状态码，Conten-Type，以及重定向路径
selenium的官方不提供获取状态码，Conten-Type，以及重定向路径的方法，并且官方说这些功能将来也不会有。java - How to get HTTP Response Code using Selenium WebDriver - Stack Overflow 非官方的方法大概有下面几种 1.通过requests重新请…...
GL绘制自定义线条3_自定义线帽
安卓Path搭配Paint可以设置线帽，我想能不能把我自己的线条绘制Demo也加上类似的功能。 线头规则描述： 1、设一个线宽一半的线段，坐标为(0, 0)到(-lineWidth / 2, 0)。 2、设步骤1的线段有一垂直于它的向量(0，1)，然后传…...
【AGC】新版鸿蒙崩溃SDK集成使用方法
【背景】 我们知道AGC的Crash SDK都是需要强制集成华为分析SDK的，在使用时的崩溃数据上报都要依靠分析服务来完成，这就容易受到限制，有时出现无数据的情况就要依次排查崩溃SDK与分析SDK，比较麻烦。而就在不久前，鸿蒙崩…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
Xshell远程连接Kali（默认 | 私钥）Note版
前言:xshell远程连接，私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
LLMs 系列实操科普（1）
写在前面： 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容，原视频时长 ~130 分钟，以实操演示主流的一些 LLMs 的使用，由于涉及到实操，实际上并不适合以文字整理，但还是决定尽量整理一份笔…...