CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效
CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效
今天给大家分享一个纯CSS按钮水晶按钮,效果很赞,希望对大家有所帮助。
本例图片

案例分析
这个按钮看起来效果很赞,我们分析一下它由几个层组成:
1. 按钮本体:渐变层+按钮文字
2.用before伪元素实现高光层+内部阴影变实现的白色内发光。
3.用after伪元素实现在按钮上一闪而过的滑动的白色透明光条。
布局代码
<button class="base">超酷的水晶按钮</button>
基础样式
:root{ --main-bg-color: #000; --color:#000; --hover-color:#993399; } button{ margin: 0.3em; outline: 0; border: none; } .base{ position: relative; padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ,并确保了按钮文字水平方向居中 */ font-family: "微软雅黑", sans-serif; font-size: 1.5rem; line-height: 1.5rem; /* 行高和字号大小相等,可以实现按钮文字在按钮内垂直居中 */ font-weight:700; color: var(--color); /* 文字颜色为预定义的前景色 */ cursor: pointer; /* 鼠标移动到按钮上时候的形状:手型 */ user-select: none; /* 让用户不能选择按钮上的文字 */ white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */ border-radius: 2rem; text-decoration: none; text-transform:uppercase; /* 字母自动修正为大写 */ transition: all .5s; /* 按钮响应动画效果的持续时间 */ margin: 1.5rem 2rem; }
按钮样式,Let's do it!
首先,我们来实现按钮的基本样子:
:root{--main-bg-color: #000;--color:#000;--hover-color:#993399;
}
button{margin: 0.3em;outline: 0;border: none;
}
.base{position: relative; padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ,并确保了按钮文字水平方向居中 */font-family: "微软雅黑相关文章:
CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效
CSS技巧专栏:一日一例 19 -纯CSS实现超酷的水晶按钮特效 今天给大家分享一个纯CSS按钮水晶按钮,效果很赞,希望对大家有所帮助。 本例图片 案例分析 这个按钮看起来效果很赞,我们分析一下它由几个层组成: 1. 按钮本体:渐变层+按钮文字 2.用before伪元素实现高光层+内…...
ArcGIS基础:基于数据图框实现地理坐标系下不同投影转换的可视化效果
ArcGIS默认以第一次加载数据的坐标系决定整个工程的坐标系 可以通过改变数据框的投影坐标系,对地理数据进行快速投影变换,以可视化展示不同投影坐标系下的地理数据形状和形态 对数据框坐标系的改变,只是针对的显示参数的改变,并…...
⚡4. Kubernetes核心资源管理操作实战
文章目录 kubectl [command] [TYPE] [NAME] [flags]kubectl run 资源名称 --image镜像名称 --port端口号kubectl create -f 配置文件名称.yaml kubectl apply -f 配置文件名称.yaml快速编写yaml文件,通过命令导出新的yaml文件Kubernetes常见资源类型和缩写 kubectl …...
【Wireshark 抓 CAN 总线】Wireshark 抓取 CAN 总线数据的实现思路
最近看到一个帖子 Wireshark 对接 Windows 系统命名管道,抓取数据 我突然想到一个很有意思的方式 你没看错 用 Wireshark 来抓取 CAN 总线数据 【其实 Wireshark 上有 CAN 总线的的解码器,不信你可以在表达式栏打 can 试下,是有这个解码器的】…...
Linux网络编程3
并发服务器 1.TCP多进程并发服务器 服务器端: 客户端: 2.TCP多线程服务器 服务器端: 客户机端: 需要学习的函数还有 1. send() 函数 send() 函数用于在套接字上发送数据。它是网络编程中发送数据到对端的主要函数之一。 函数…...
gitlab 服务器安装
阿里云盘快传 百度链接 链接:https://pan.baidu.com/s/1Gn5bWHi45Dcpe1RH1S06dw 提取码:yai2 然后就是有一台服务器 cd /mkdir gitlab上传下载好的东西rpm -ivh gitlab-ce-10.8.4-ce.0.el7.x86_64.rpm 这里可以tab提示vim /etc/gitlab/gitlab.rb我建议…...
【pytorch】全连接网络简单二次函数拟合
下面是一个使用PyTorch实现全连接网络来拟合简单二次函数 y x 2 y x^2 yx2 的示例。我们将创建一个简单的神经网络,定义损失函数和优化器,并进行训练。 下面是完整的代码示例: import torch import torch.nn as nn import torch.optim …...
git提交到本地仓库了,怎么撤回
如果你想要撤回已经提交到本地仓库的更改,可以使用以下一些Git命令: 1. **撤回最后一次提交** (不保留更改): - git reset --hard HEAD~1:这会撤销最后一次提交,并且所有的更改都会丢失。 2. **撤回最后一次提交** (保留更改…...
lua学习(1)
vscode打开c或者lua文件 插件显示禁用,怎么开启插件。 1. lua 字符串 单个引号和双引号都可变量的定义默认是全局的删除一个变量将其赋值为nil即可 如: bnilnil还可以对表中的数据进行删除,也可删除一个表只要变量不是nil,变…...
SQL报错注入之updatexml
目录 1.updatexml报错原理 2.判断是否有注入点 我们在地址栏中输入?id1 我们在地址栏中输入?id1-- 3.updatexml报错注入 3.1爆库名 3.2爆表名 3.3爆字段名 3.4爆数据 1.updatexml报错原理 updatexml(xml_doument,XPath_string,new_value) 第一个参数:XML…...
单元测试的重要性
单元测试和测试驱动开发(TDD)是软件开发中的关键实践,它们有助于提高代码的质量和可维护性。以下是对单元测试和TDD的深入分析,以及如何使用Java中的测试框架来提高代码质量的指南。 单元测试的重要性 单元测试是针对程序中最小…...
mysql线上查询数据注意锁表问题
在数据库中,锁定是用来控制多个事务并发访问相同数据时的一种机制。正确的锁定机制可以保证数据的一致性和完整性,但如果不当使用,也可能导致阻塞和死锁,特别是在高并发环境中。长时间的锁等待不仅会影响当前的事务,还…...
UE5 右键菜单缺少Generate Visual Studio project files
前言 在安装完毕 ue5 后,看到别人右键菜单有 多出来的三个选项 ,但是我却没有,如下图: 解决方式 1、在 “C:\Program Files (x86)\Epic Games\Launcher\Engine\Binaries\Win64” 路径下有 UnrealVersionSelector.exe 文件。 …...
前端性能优化-webpack构建优化
前言 本文主要总结 webpack 构建优化相关的事情 PS: webpack 的每次更新都会带来很多的新特性,因此学习新知识的时候,不要专注于流程的配置和调参。因为流程终会简化,参数(API)终会升级。要抓大放小,把精力…...
Traefik:部署与实战
一、介绍Traefik Traefik是一个开源的反向代理和负载均衡器,专为现代化的微服务架构设计。它可以与各种容器化平台(如Docker、Kubernetes)和服务发现工具(如Consul、Etcd)集成,使部署和管理服务变得更加简…...
[Spring] SpringBoot统一功能处理与图书管理系统
🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…...
实现吸顶效果,一个页面多个元素吸顶效果
前言 新业务开发用到了吸顶效果而且是一个页面滚动到不同的位置不同的元素进行吸顶叠加。我是基于uniapp去写的,原理思路都一样 代码部分 下面的代码我写了两种方法都是一样的一个是通过js控制变量添加元素一个是直接通过css样式进行控制 <!-- 上半部总览位置…...
【C++入门(下)】—— 我与C++的不解之缘(二)
前言 接上篇,继续来学习C,本篇内容大概有 引用,inline 和 nullptr。 六、引用: 6.1、引用的定义 引用不是新定义一个变量,而是给已存在的变量取了一个别名,编译器不会为引用变量开辟内存空间,它…...
【数据结构】哈希应用-STL-位图
目录 1、位图的概念 2、位图的设计与实现 2.1 set 2.2 reset 2.3 test 3、C库中的位图 4、位图的优缺点 5、位图相关题目 1、位图的概念 面试题:给40亿个不重复的无符号整数,没排过序。给一个无符号整数,如何快速判断一个数是否在这4…...
Unbuntu 服务器- Anaconda安装激活 + GPU配置
一、Anaconda安装激活 1.更新 sudo apt-get update 2.安装wget、vim sudo apt-get install wget sudo apt-get install vim 3.安装Anaconda 进入这个网址:Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 点这里&#x…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
