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

纯css实现超炫酷的星空背景按钮

news 2025/12/29 7:06:39

也是在制作项目时发现的，找了很多demo，一点一点测试，发现这个按钮也是非常的炫酷

用到了几个属性，@keyframes，::after,::before

先了解一下他们分别都是干嘛的

@keyframes

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和转换（transition）相比，关键帧 keyframes 可以控制动画序列的中间步骤。

怎么使用关键帧：

要使用关键帧，先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

::after

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

他的语法格式：

element:after  { style properties }  /* CSS2 语法 */element::after { style properties }  /* CSS3 语法 */

::after 表示法是在CSS 3 中引入的，::符号是用来区分[伪类](/zh-CN/CSS/Pseudo-classes)和伪元素的。支持 CSS3 的浏览器同时也都支持 CSS2 中引入的表示法:after`。

::before

在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。

利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。

就比如：在链接前面加一个星星等..

a::before{
content:"★"
}

好了就先这样，先看一下今天的主题：

按钮实现效果：

整体代码如下：

<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>css——button</title><style>
.dialog_but {display: flex;justify-content: center;align-items: center;width: 13rem;height: 3rem;background-size: 300% 300%;backdrop-filter: blur(1rem);border-radius: 5rem;transition: 0.5s;animation: gradient_301 5s ease infinite;border: double 4px transparent;background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);background-origin: border-box;background-clip: content-box, border-box;
}#dialog_container {position: fixed;z-index: -1;width: 100%;height: 100%;overflow: hidden;transition: 0.5s;backdrop-filter: blur(1rem);border-radius: 5rem;
}strong {z-index: 2;font-family: 'Avalors Personal Use';font-size: 12px;letter-spacing: 5px;color: #FFFFFF;text-shadow: 0 0 4px white;
}#dialog_glow {position: absolute;display: flex;width: 12rem;
}.dialog_circle {width: 100%;height: 30px;filter: blur(2rem);animation: pulse_3011 4s infinite;z-index: -1;
}.dialog_circle:nth-of-type(1) {background: rgba(254, 83, 186, 0.636);
}.dialog_circle:nth-of-type(2) {background: rgba(142, 81, 234, 0.704);
}.dialog_but:hover #dialog_container {z-index: 1;background-color: #212121;
}.dialog_but:hover {transform: scale(1.1)
}.dialog_but:active {border: double 4px #FE53BB;background-origin: border-box;background-clip: content-box, border-box;animation: none;
}.dialog_but:active .dialog_circle {background: #FE53BB;
}#dialog_content_container {position: relative;background: transparent;width: 200rem;height: 200rem;
}#dialog_content_container::after {content: "";position: absolute;top: -10rem;left: -100rem;width: 100%;height: 100%;animation: animStarRotate 90s linear infinite;
}#dialog_content_container::after {background-image: radial-gradient(#ffffff 1px, transparent 1%);background-size: 50px 50px;
}#dialog_content_container::before {content: "";position: absolute;top: 0;left: -50%;width: 170%;height: 500%;animation: animStar 60s linear infinite;
}#dialog_content_container::before {background-image: radial-gradient(#ffffff 1px, transparent 1%);background-size: 50px 50px;opacity: 0.5;
}
/*控制按钮中 小点点的移动*/
@keyframes animStar {from {transform: translateY(0);}to {transform: translateY(-135rem);}
}
/*控制按钮中 小点点的旋转*/
@keyframes animStarRotate {from {transform: rotate(360deg);}to {transform: rotate(0);}
}@keyframes gradient_301 {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}@keyframes pulse_3011 {0% {transform: scale(0.75);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);}70% {transform: scale(1);box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}100% {transform: scale(0.75);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
}</style></head><body><button type="button" class="dialog_but"><strong>按钮</strong><div id="dialog_container"><div id="dialog_content_container"></div></div><div id="dialog_glow"><div class="dialog_circle"></div><div class="dialog_circle"></div></div></button></body></html>

纯css实现超炫酷的星空背景按钮

@keyframes

怎么使用关键帧：

::after

::before

按钮实现效果：

相关文章：

纯css实现超炫酷的星空背景按钮

openpnp - 贴片前, 放入一块新板子后, 对板子的坐标矫正

计及需求响应的改进灰狼优化算法求解风、光、柴、储容量优化配置（Matlab代码实现）

Elasticsearch使用——高级篇

Java网络爬虫-HttpClient工具类

LeetCode203_203. 移除链表元素

【洛谷 P1443】马的遍历题解（广度优先搜索）

为什么gpt输出有随机性？

配置Clion用于STM23开发（Makefile）

如何在 Istio 中使用 SkyWalking 进行分布式追踪

HBase高手之路1-Hbase简介

计算机视觉手指甲标注案例

linux 字符串截取(cut)

003+limou+HTML——（3）HTML列表

设计模式---工厂模式

C++基础了解-13-C++ 数组

ICC2：限制LVT比例

Kettle工具通过JNDI连接Oracle集群

[ 常用工具篇 ] windows安装phpStudy_v8.1_X64

SpringBoot 如何将配置文件挂到 jar 包外面？

label-studio的使用教程(导入本地路径)

进程地址空间（比特课总结）

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

IGP（Interior Gateway Protocol，内部网关协议）

前端导出带有合并单元格的列表

vue3 字体颜色设置的多种方式

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

2023赣州旅游投资集团

力扣-35.搜索插入位置

Java + Spring Boot + Mybatis 实现批量插入