俗话说得好，兴趣是最好的老师。本篇文章搜集了几个俊秀的宇宙风格按钮动画效果的代码，希望它们能够引发你对 CSS 的热爱。作为前端开拓者，我们不仅仅是制作写页面和与 后端 API 打交道，偶尔也须要调味剂。废话不多说，让我们一起来解读这些 CSS 代码吧。
1、粒子动画效果的按钮
HTML部分
<button class="btn" type="button"> <strong>SPACE</strong> <div id="container-stars"> <div id="stars"></div> </div> <div id="glow"> <div class="circle"></div> <div class="circle"></div> </div></button>
CSS部分
.btn { 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;}#container-stars { 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;}#glow { position: absolute; display: flex; width: 12rem;}.circle { width: 100%; height: 30px; filter: blur(2rem); animation: pulse_3011 4s infinite; z-index: -1;}.circle:nth-of-type(1) { background: rgba(254, 83, 186, 0.636);}.circle:nth-of-type(2) { background: rgba(142, 81, 234, 0.704);}.btn:hover #container-stars { z-index: 1; background-color: #212121;}.btn:hover { transform: scale(1.1)}.btn:active { border: double 4px #FE53BB; background-origin: border-box; background-clip: content-box, border-box; animation: none;}.btn:active .circle { background: #FE53BB;}#stars { position: relative; background: transparent; width: 200rem; height: 200rem;}#stars::after { content: ""; position: absolute; top: -10rem; left: -100rem; width: 100%; height: 100%; animation: animStarRotate 90s linear infinite;}#stars::after { background-image: radial-gradient(#ffffff 1px, transparent 1%); background-size: 50px 50px;}#stars::before { content: ""; position: absolute; top: 0; left: -50%; width: 170%; height: 500%; animation: animStar 60s linear infinite;}#stars::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); }}
代码阐明
按钮的笔墨是“SPACE”，利用了strong标签来加粗字体。按钮背景是一个渐变色背景，利用了linear-gradient函数来实现。按钮边框是一个空心的圆角矩形，利用了border属性来实现。按钮内部有一个含有星星动画效果的div，利用了position:fixed来实现全屏，以及两个伪元素before和after来天生星星。按钮内部还有一个发光的圆形动画效果，利用了两个.circle元素，以及animation属性和filter属性来实现。当鼠标悬停在按钮上时，星星背景会涌现，并且按钮会放大。当按钮被点击时，发光效果变成粉色，并且渐变色背景和星星动画效果都停滞。@keyframes pulse_3011
这个动画定义了一个名为“pulse_3011”的关键帧动画。在该动画中，元素从开始状态缩小到0.75倍，同时有一个0.7不透明度的玄色阴影。在动画实行的70％处，元素扩大到原始大小，同时玄色阴影消逝。终极，元素再次缩小到0.75倍，而玄色阴影再次消逝。该动画无限重复。
stars::before 和 stars::after 干系的代码是实现星星循环动画的关键，设置了背景为一个由白色和透明颜色交替组成的径向渐变色，这样就形成了一些闪闪发光的小老婆星。通过 animation 属性设置了动画效果，个中 animStar 是一个移动动画，设置了 60s 的动画韶光，并且利用 linear 动画函数，使得小老婆星以匀速向上移动的办法涌如今屏幕上，并且利用 infinite 让其循环播放。这样就形成了一些往上移动的小老婆星，从而实现了全体星空的动态效果。
玉轮和太阳效果切换的按钮HTML部分
<button><div id="moon" class="state"> Moony</div><div id="sun" class="state">Sunny</div><span class="border border1"></span><span class="border border2"></span></button>
CSS部分
button { --sunGradient: linear-gradient(to right, #fa709a 0%, #fee140 100%); --moonGradient: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); display: flex; justify-content: center; align-items: center; position: relative; width: 85px; height: 85px; color: white; font-size: 0.8em; font-weight: bold; text-transform: uppercase; border-radius: 70px; background-color: transparent; transition: 0.09s; box-shadow: 0 20px 30px black; overflow: hidden;}button:hover { transform: rotate(360deg);}button:active { transform: rotate(360deg) scale(1.2); box-shadow: -15px -15px 500px white,inset 0 0 5px black, 0px -15px 20px white;}.state { position: absolute; display: flex; justify-content: center; align-items: center; border-radius: inherit; width: 90%; height: 90%; border: 4px groove black;}#sun { display: none; transition: 2s; background: var(--sunGradient);}#moon { background: var(--moonGradient);}button:hover #sun { display: flex;}button:active #moon { display: none;}.border { position: absolute; transition: 0.4s; z-index: -1; border-radius: inherit; background: var(--moonGradient);}button:hover .border { background: var(--sunGradient);}.border1 { width: 45px; height: 100px; animation: 1s linear reverse infinite rotation_91;}.border2 { width: 200px; height: 35px; animation: 3s linear reverse infinite rotation_91;}@keyframes rotation_91 { from { transform: rotate(0deg) } to { transform: rotate(360deg) }}
代码阐明：
这段代码实现了一个状态切换的动画按钮效果，它包含两个状态：一个是太阳状态，另一个是玉轮状态。当鼠标悬停在按钮上时，太阳状态会涌现，玉轮状态会消逝。当用户点击按钮时，按钮会放大并旋转，并且太阳状态会更换成玉轮状态，玉轮状态则更换成太阳状态。
详细实现的逻辑如下：
HTML部分：
一个<button>元素，作为容器来包含按钮的其他元素。两个状态元素：<div id="sun" class="state">和<div id="moon" class="state">，它们分别表示太阳和玉轮状态，并且它们都有一个state类，用于设置它们的共同样式。两个边框元素：<span class="border border1"></span>和<span class="border border2"></span>，它们用于设置按钮的边框样式。CSS部分：
设置按钮的基本样式：它是一个圆形的容器，它的背景颜色是透明的。它有一个玄色的描边，以及一个白色的阴影。当用户悬停在按钮上时，它会旋转360度。当用户点击按钮时，它会放大并旋转360度，并且它的阴影会变成白色的。两个状态元素的共同样式：它们的位置是绝对定位的，它们都是圆形的，它们都有一个4像素的玄色描边，它们的宽度和高度都是按钮的90%。太阳状态元素的样式：它的背景是一个渐变，当用户悬停在按钮上时，它会显示出来。玉轮状态元素的样式：它的背景也是一个渐变。当用户悬停在按钮上时，它的边框会变成太阳状态元素的渐变颜色。两个边框元素的样式：它们的位置是绝对定位的，它们的颜色是按钮的玉轮状态的渐变颜色，它们分别有两个不同的大小和不同的动画，它们都是无限循环的动画。末了，利用keyframes关键字定义两个动画rotation_91，使它们旋转360度。3、小行星光圈带环抱HTML部分
<button> Button</button>
CSS部分：
button { position: relative; padding: 18px 55px; font-size: 15px; font-weight: bold; color: #fff; background: linear-gradient(87deg, #6d67e4, #7743db, #4e31aa, #6d67e4, #6d67e4); background-size: 600% 600%; border: 3px solid #7743db; border-radius: 8px; / filter: drop-shadow(0 0 4px #9F73AB); / box-shadow: inset 0 0 10px 1px #7743db, 0 0 10px 5px #7743db; cursor: pointer; transition: all 0.5s; animation: GradientAnimation 25s ease infinite;}button::after { content: ""; position: absolute; width: 202px; height: 54px; top: 0; left: -17px; border: 5px solid #453c67; border-width: 0 2px 4px 0; border-radius: 100%; filter: drop-shadow(0px 0px 6px rgba(78, 49, 180, 1)); transform: rotate(-30deg); animation: LinerAfter 15s ease infinite;}button::before { content: ""; position: absolute; width: 200px; height: 50px; top: 0; left: -20px; border: 5px solid #6d67e4; border-width: 0 12px 8px 4px; border-radius: 100%; filter: drop-shadow(0px 0px 6px rgba(109, 103, 228, 1)); / box-shadow: inset 0 0 10px 1px #4E31AA, 0 0 10px 5px #4E31AA; / transform: rotate(-30deg); transition: all 0.5s; animation: LinerBefore 15s ease infinite;}@keyframes GradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }}@keyframes LinerAfter { 0% { left: -27px; height: 54px; } 50% { left: -7px; height: 37px; } 100% { left: -27px; height: 54px; }}@keyframes LinerBefore { 0% { left: -30px; height: 50px; } 50% { left: -10px; height: 33px; } 100% { left: -30px; height: 50px; }}
代码阐明：
CSS代码设置了按钮的样式，包括位置、内边距、字体大小、加粗程度、颜色、背景、边框、圆角、光标形状、过渡效果、动画等。个中background属性利用了线性渐变，border属性设置了3px宽度的实线边框，border-radius属性设置了8px的圆角。box-shadow属性设置了两个阴影效果，一个是内阴影，另一个是外阴影。button::after和button::before是button的伪元素，分别表示按钮前面和后面的圆圈。这两个圆圈都是绝对定位，大小、位置、边框、圆角等属性不同，但都利用了drop-shadow滤镜和rotate旋转变换效果。动画效果分别由GradientAnimation、LinerAfter和LinerBefore三个关键帧动画掌握，分别设置了不同的属性变革规则，实现了按钮和圆圈的不同的动态效果。
结束本日的内容就分享到这里，太多了就不利于我们去理解，虽然就三个案例，但是须要我们去逐步消化和理解，才能成为自己的知识，建议大家还是亲自实现下上述的按钮动画效果，这些案例虽然我们在平常的事情中很少用到，但是如果你接到酷炫的项目，比如某品牌的宣扬站点时，我相信这些效果还是能派上用场的。
如果你喜好这样的文章，请点赞支持下，后续我会持续分享这类的内容，如果太少，我会以为大家不太喜好这样的文章，我只能自己私藏了，末了别忘却关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。
