PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

2022年的新春即将到来，每年的春节我们都要放烟花，但现在因为城市限制了放烟花，少了些许年味，所以这次想到了用CSS给大家放一场烟花。提前预祝大家新春快乐，来年事事如意，升职加薪～

HTML的结构

先写出HTML的结构；分为两部分：一部分是 “新春快乐”，另一部分是烟花使用的元素

<body>
  <!-- 新春文字， 分开是为了后面字体自转 -->
  <div class="year-wrap">
    <div class="word">新</div>
    <div class="word">春</div>
    <div class="word">快</div>
    <div class="word">乐</div>
  </div>
  <!-- 烟花使用的元素， 一个元素一个烟花 -->
  <div class="fireworks-wrap">
    <div class="fireworks"></div>
    <div class="fireworks"></div>
    <div class="fireworks"></div>
    <div class="fireworks"></div>
    <div class="fireworks"></div>
    <div class="fireworks"></div>
    <div class="fireworks"></div>
    <div class="fireworks"></div>
    <div class="fireworks"></div>
    </div>
</body>

用CSS实现动画

1. 用CSS实现“新春快乐”字体自转

设置字体样式，实现文字渐变效果

color: transparent; 设置字体颜色为透明
background-image: 设置渐变色
background-clip: text; 背景裁剪成文字的前景色。


.word {
  font-size: 200px;
  font-weight: bold;
  color: transparent;
  background-image: linear-gradient(to top, #ffb199 0%, #ff0844 100%);
  -webkit-background-clip: text;
}

使用以上CSS样式实现以下字体渐变效果

用CSS3的animation实现字体3D自转

使用CSS3的3D transform 实现字体 Y轴 自转

transform-style: preserve-3d; 设置元素的子元素是位于 3D 空间
transform: rotate3d(0, 1, 0, 0deg); 设置元素 Y轴的旋转角度初始角度为0
animation: rotate-animation 3s ease infinite; 使用CSS3的动画现实字体自转
@keyframes 使用关键帧来实现控制动画

.word {
  font-size: 200px;
  font-weight: bold;
  color: transparent;
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  -webkit-background-clip: text;
  /* CSS3动画 */
  transform-style: preserve-3d;
  transform: rotate3d(0, 1, 0, 0deg);
  animation: rotate-animation 3s ease infinite;
}

@keyframes rotate-animation {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }

  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

加上动画的效果如下

2022-01-11 14.41.46.gif

2. 用CSS实现烟花效果

先写出烟花的绽放效果，不想写太多的元素所以使用了border和::bofore ::after伪元素实现类似烟花的图案（潦草了点）。

这里比较有意思的是使用了 currentColor 关键字，它的意思是：当前字体颜色。它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）；这就相当于子元素使用到颜色属性都可以使用currentColor值来设置颜色。

在这里我们使用currentColor来实现各种烟花的颜色。

.fireworks-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fireworks {
  position: fixed;
  top: 200px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: #FFE75E;
  border: 4px dotted currentColor;
}
.fireworks:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px dotted currentColor;
  transform: translate(-50%, -50%) rotate(30deg);
}

.fireworks:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px dotted currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 设置烟花的位置和烟花的颜色 */
.fireworks:nth-child(1) {
  left: 10vw;
  color: #FFE75E;
}
.fireworks:nth-child(2) {
  left: 20vw;
  color: #F4EEC7;
}

.fireworks:nth-child(3) {
  left: 30vw;
  color: #A7E9AF;
}

.fireworks:nth-child(4) {
  left: 40vw;
  color: #FD5E53;
}
.fireworks:nth-child(5) {
  left: 50vw;
  color: #FE9801;
}
.fireworks:nth-child(6) {
  left: 60vw;
  color: #BAC7A7;
}
.fireworks:nth-child(7) {
  left: 70vw;
  color: #CCDA46;
}
.fireworks:nth-child(8) {
  left: 80vw;
  color: #F4EEC7;
}
.fireworks:nth-child(9) {
  left: 90vw;
  color: slateblue;
}

想要有绽放烟花的效果还是少不了CSS3的animation

transform: scale(0.1); css 缩放元素大小让烟花从 0.1的大小放大到2.5倍的大小，让其有烟花绽放的效果


@keyframes light-animation {
  0% {
    top: 100vh;
    transform: scale(0.1);
  }
  70% {
    transform: scale(0.1);
  }
  100% {
    top: 200px;
    transform: scale(2.5);
  }
}

完整的烟花效果CSS代码如下

.fireworks-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fireworks {
  position: fixed;
  top: 100vh;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: #FFE75E;
  border: 4px dotted currentColor;
  transform: scale(0.1);
}
.fireworks:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px dotted currentColor;
  transform: translate(-50%, -50%) rotate(30deg);
}

.fireworks:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px dotted currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.fireworks:nth-child(1) {
  left: 10vw;
  color: #FFE75E;
  animation: light-animation 3s ease 2.5s infinite
}
.fireworks:nth-child(2) {
  left: 20vw;
  color: #F4EEC7;
  animation: light-animation 3s ease 3.5s infinite
}

.fireworks:nth-child(3) {
  left: 30vw;
  color: #A7E9AF;
  animation: light-animation 3s ease infinite
}

.fireworks:nth-child(4) {
  left: 40vw;
  color: #FD5E53;
  animation: light-animation 3s ease 1s infinite
}
.fireworks:nth-child(5) {
  left: 50vw;
  color: #FE9801;
  animation: light-animation 3s ease 3s infinite
}
.fireworks:nth-child(6) {
  left: 60vw;
  color: #BAC7A7;
  animation: light-animation 3s ease 1.5s infinite
}
.fireworks:nth-child(7) {
  left: 70vw;
  color: #CCDA46;
  animation: light-animation 3s ease 0.5s infinite
}
.fireworks:nth-child(8) {
  left: 80vw;
  color: #F4EEC7;
  animation: light-animation 3s ease 4s infinite
}
.fireworks:nth-child(9) {
  left: 90vw;
  color: slateblue;
  animation: light-animation 3s ease 2s infinite
}

@keyframes light-animation {
  0% {
    top: 100vh;
    transform: scale(0.1);
  }
  70% {
    transform: scale(0.1);
  }
  100% {
    top: 200px;
    transform: scale(2.5);
  }
}

最后实现的效果

总结

最后我们来总结下，都使用了那些CSS的知识

1. 字体渐变

color: transparent;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
-webkit-background-clip: text;

CSS 渐变 由两种或多种颜色之间的渐进过渡组成，可以选择三种类型的渐变：线性(linear-gradient) 、径向(radial-gradient)、圆锥（conic-gradient）

具体的渐变知识可以点击查看背景渐变

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

取值：

border-box

背景延伸至边框外沿（但是在边框下层）。
padding-box

背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box

背景被裁剪至内容区（content box）外沿。
text

背景被裁剪成文字的前景色。

2. currentColor关键字

当前字体颜色。它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）；这就相当于子元素使用到颜色属性都可以使用currentColor值来设置颜色。

3. CSS3 3D transform

transform-style 设置元素的子元素是位于 3D 空间中还是平面中。

取值

flat

设置元素的子元素位于该元素的平面中。
preserve-3d

指示元素的子元素应位于 3D 空间中。

4. CSS3 animation动画和@keyframes关键帧

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count

animation: 动画名称动画过度时间动画的速度曲线动画延时时间动画的循环次数

@keyframes 就是指定一个样式到另一个样式的过程

如下创建一个背景色从红色变为黄色

@keyframes myfirst {
    from {
       background: red;
    }
    to {
       background: yellow;
    }
}

@keyframes 动画名称 {
    from {
        初始动画样式；
    }
    to {
        动画结束样式；
   }
}

以上的from to 也可以是百分比

@keyframes 动画名称 {
   0% {
        初始动画样式；
   }
   100% {
        动画结束样式；
   }
}

演示地址

项目源码在github上。

【新春】纯CSS实现新春快乐和放烟花效果

HTML的结构

用CSS实现动画

总结