分享几个漂亮的宇宙风格的按钮动画效果，让你喜欢上CSS

载说明：原创不易，未经授权，谢绝任何形式的转载

俗话说得好，兴趣是最好的老师。本篇文章搜集了几个漂亮的宇宙风格按钮动画效果的代码，希望它们能够激发你对 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);
  }
}

代码解释

1. 按钮的文字是“SPACE”，使用了strong标签来加粗字体。
2. 按钮背景是一个渐变色背景，使用了linear-gradient函数来实现。
3. 按钮边框是一个空心的圆角矩形，使用了border属性来实现。
4. 按钮内部有一个含有星星动画效果的div，使用了position:fixed来实现全屏，以及两个伪元素before和after来生成星星。
5. 按钮内部还有一个发光的圆形动画效果，使用了两个.circle元素，以及animation属性和filter属性来实现。
6. 当鼠标悬停在按钮上时，星星背景会出现，并且按钮会放大。
7. 当按钮被点击时，发光效果变成粉色，并且渐变色背景和星星动画效果都停止。

@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部分：

1. 一个<button>元素，作为容器来包含按钮的其他元素。
2. 两个状态元素：<div id="sun" class="state">和<div id="moon" class="state">，它们分别表示太阳和月亮状态，并且它们都有一个state类，用于设置它们的共同样式。
3. 两个边框元素：<span class="border border1"></span>和<span class="border border2"></span>，它们用于设置按钮的边框样式。

CSS部分：

1. 设置按钮的基本样式：它是一个圆形的容器，它的背景颜色是透明的。它有一个黑色的描边，以及一个白色的阴影。
2. 当用户悬停在按钮上时，它会旋转360度。
3. 当用户点击按钮时，它会放大并旋转360度，并且它的阴影会变成白色的。
4. 两个状态元素的共同样式：它们的位置是绝对定位的，它们都是圆形的，它们都有一个4像素的黑色描边，它们的宽度和高度都是按钮的90%。
5. 太阳状态元素的样式：它的背景是一个渐变，当用户悬停在按钮上时，它会显示出来。
6. 月亮状态元素的样式：它的背景也是一个渐变。
7. 当用户悬停在按钮上时，它的边框会变成太阳状态元素的渐变颜色。
8. 两个边框元素的样式：它们的位置是绝对定位的，它们的颜色是按钮的月亮状态的渐变颜色，它们分别有两个不同的大小和不同的动画，它们都是无限循环的动画。
9. 最后，使用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三个关键帧动画控制，分别设置了不同的属性变化规则，实现了按钮和圆圈的不同的动态效果。

结束

今天的内容就分享到这里，太多了就不利于我们去理解，虽然就三个案例，但是需要我们去慢慢消化和理解，才能成为自己的知识，建议大家还是亲自实现下上述的按钮动画效果，这些案例虽然我们在平常的工作中很少用到，但是如果你接到酷炫的项目，比如某品牌的宣传站点时，我相信这些效果还是能派上用场的。

如果你喜欢这样的文章，请点赞支持下，后续我会持续分享这类的内容，如果太少，我会觉得大家不太喜欢这样的文章，我只能自己私藏了，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义 CSS 变量，自定义主题颜色。

布局

布局 其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。

看上图，而这里，我们就只是最简单的布局方式，从上而下：

1、优惠券金额和过期时间

2、优惠券描述

3、按钮（其实按钮也可以放到“2”里面去）

这样分析，我们就有了 html 架构了

<div class="coupon">
  <!-- 1、优惠券金额和过期时间 -->
  <div class="price">
    100元
    <span>优惠券</span>
    <p class="timeout">2020-12-31 18:18:18过期</p>
  </div>

  <!-- 2、优惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、过期作废</p>
  </div>

  <!-- 3、按钮 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS修饰

接下来我们用 CSS 美化我们的 html 。同理，我们也根据布局分步进行样式书写。

1、优惠券金额和过期时间样式

这里的核心就是上方的凹槽和下方的锯齿

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css变量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

这里用到了 径向渐变，不清楚用法的小伙伴可以看看语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注释：

（1）、shape 确定圆的类型:

ellipse (默认): 指定椭圆形的径向渐变。

circle ：指定圆形的径向渐变

（2）、size 定义渐变的大小，可能值：

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

（3）、position 定义渐变的位置。可能值：

center（默认）：设置中间为径向渐变圆心的纵坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

（4）、start-color, ..., last-color 用于指定渐变的起止颜色。

这样价格上方的凹槽就有了，接下来下方的锯齿我们也可以用 径向渐变 的方式实现：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

伪类元素 ::after 设置径向渐变背景为一个圆，后进行平铺就形成了锯齿，调整位置。

其实还有更简单的方法，可以直接用一个虚线边框即可搞定，请看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

当然也有缺陷，间隔位置不好控制

2、优惠券描述与按钮 优惠券核心锯齿已经搞定了，下面都是小菜啦，非常简单咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按钮样式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

主题颜色

大家都看到了，我们上方代码主要颜色都采用的变量，而且变量是定义在 .coupon 类选择器里面的。这样的原因是：

1、CSS变量作用域（CSS变量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主题使用

ok，我们就可以copy 多个 优惠券，并给每个添加一个不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下来我们就为不同主题定义不同的颜色变量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

这样，theme1主题下的优惠券，就是紫色主题，theme2主题下的优惠券，就是蓝色主题...，而默认主题颜色就是我们 .coupon 类选择器里面的定义的变量颜色（红色）。

小结

今天你学到了吗？从布局分析到具体实现，再到主题颜色，相信小伙伴们都各有所得。

形元素的应用是在网页设计中一个相对较新的发展。与互联网普及初期相比，如今的网页设计水平已经超出很多人的想象，比如圆形的应用，现在的CSS工具使圆圈的创建越来越容易，所以他们在网页设计中的使用变得更加普遍。

当然还有许多人认为圆在网页设计中使用比较困难，并且它的存在仍有争议。然而，如果我们保持一个良好的网格布局，留有大量的空白，基于圆形的设计会成为网页设计的亮点。

YES!为什么不大胆探索？你会发现，如果能成功运用圆形元素，会有令你意想不到的效果，要知道，圆形要素往往是很吸引眼球的，它会让你脱颖而出。所以，今天我们就与大家共同学习如何选择合适的元素，并把它应用在圆形图案中。

Logo

首先来说说圆形LOGO如何运用：圆形LOGO，会给人一种干净、简约的感觉，也容易给人以优雅和高级的印象。圆是人类已知的最古老的图形之一，生活中无处不存在圆形。产生这个事实的原因可能是，许多设计师用它来代表自己的品牌和网站。下面的以圆形为基础的logo设计就值得学习。

导航栏

在今天的成长和不断发展的移动市场，用圆圈作为导航正在成为一个日益流行和合乎逻辑的选择。随着的触摸屏设备的兴起，除了智能手机和平板电脑，这种图案的导航应用越来越广泛，并有很好的理由。采用圆形的按钮，可以直观地与用户连接，甚至模仿指尖的形状，激励用户按它。

图标

圆形标志肯定是在网页设计中最常用的和运行时间最长的圆形元素。因为它们通常是图像，所以甚至不需要CSS提供太多的功能就可以达到运用的要求，没错，圆形可以自己去完美胜任任务，也许有人会认为，圆形图标已经在网页设计中运用了一段时间了，也应有一些变化了，是不是应该开发更多样化的趋势？但我们也发现不知为何圆形越来越广泛运用，可能It just work吧，它就是有这样的能力。

图片预览

我们已经在很多网站中看到这种技术了，不得不说还是很赏心悦目的的。而且，把一个预览图巧妙的放在一个剪裁圈里通常会让人觉得很炫酷哦，这就达到了吸睛的效果，是的，圆形不仅会在视觉上引导用户，还能更好的引导互动与交流。至于可用性，只要给圆形图像足够的空间，它们一样可以匹配网站创意与和谐的外观。

Calls to action

网站导航和触摸屏设备的普及让CTAs呼吁栏也有了很好的圆形素材使用效果，不过，如果你在网站上以类似的方式同时呈现导航和CTAs，那就不太好了，你应该尽量让他们用不同方式脱颖而出。导航很必要，CTAs也非常重要，如何把两部分都做得漂亮？对新的网页设计师来说，创建一个可视化的层次是不错的意见。

本文来源：视觉中国