纯css写个呼吸灯动画

纯CSS实现呼吸灯动画主要是通过CSS的关键帧动画（@keyframes）和动画属性（animation）来完成的。下面是一个简单的实现方法：

首先，定义一个元素的基本样式，比如一个`div`元素，并为其设置`animation`属性来指定动画的名称、持续时间以及无限循环播放。

div {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%; /* 使其成为一个圆形 */
  animation: breathe 2s infinite; /* 动画名称、持续时间、无限循环 */
}

@keyframes breathe {
  0% {
    transform: scale(1); /* 初始大小 */
    opacity: 1;
  }
  50% {
    transform: scale(1.2); /* 稍微放大 */
    opacity: 0.5;
  }
  100% {
    transform: scale(1); /* 恢复原大小 */
    opacity: 1;
  }
}

在这个例子中，`@keyframes`定义了一个名为`breathe`的动画，它通过改变元素的`transform`属性的`scale`值（缩放比例）和`opacity`属性（透明度）来创建呼吸效果。从100%大小和完全不透明开始，逐渐放大到120%大小和半透明，然后再缩回到原始大小并恢复完全不透明。

相关问题

帮我用纯css写一个文字变大动画

要使用纯CSS实现文字变大动画，可以利用`@keyframes`规则定义动画的关键帧，然后通过`animation`属性将动画应用到文字元素上。以下是一个简单的例子，描述了如何实现文字大小从较小逐渐变为较大的动画效果：

/* 定义动画的关键帧 */
@keyframes enlargeText {
    from {
        font-size: 16px; /* 初始文字大小 */
    }
    to {
        font-size: 32px; /* 最终文字大小 */
    }
}

/* 应用动画到指定的元素 */
.enlarge-animation {
    animation-name: enlargeText; /* 指定动画名称 */
    animation-duration: 2s; /* 动画持续时间 */
    animation-iteration-count: infinite; /* 动画执行次数，这里是无限次 */
    animation-direction: alternate; /* 动画方向，alternate表示来回交替 */
}

然后在HTML中使用这个样式：

<p class="enlarge-animation">这是一段会变大的文字动画。</p>

这段代码将会使得`<p>`标签内的文字大小在2秒内从16像素变为32像素，并且这个动画会无限次地交替进行。

用css写一个特效动画按钮

以下是一个简单的用CSS实现的按钮特效动画示例：

HTML代码：

<button class="btn">点击我</button>

CSS代码：

.btn {
  background-color: #ffb347;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.btn:after {
  content: '';
  position: absolute;
  top: -120%;
  left: -120%;
  width: 200%;
  height: 200%;
  background-color: #fff;
  opacity: 0;
  transform: rotate(45deg);
  transition: all 0.8s ease-in-out;
}

.btn:hover {
  background-color: #ff8c00;
}

.btn:hover:after {
  top: -30%;
  left: -30%;
  opacity: 1;
}

解释：

- `btn` 类为按钮样式的基本样式；
- `btn:after` 为按钮鼠标悬停时的效果，设置了一个绝对定位的伪元素，使用 `transform` 属性将其旋转 45 度，使用 `transition` 属性设置过渡效果；
- `btn:hover` 为按钮鼠标悬停时的基本样式，改变了 `background-color` 属性；
- `btn:hover:after` 为按钮鼠标悬停时的伪元素样式，改变了 `top`、`left` 和 `opacity` 属性，实现了从四个角落逐渐展开的效果。

效果展示：https://codepen.io/pen/?editors=1100