兔年春节特辑 | 阖家团圆，一起看春晚-CFANZ编程社区

灵感来源

最近在欢乐的集卡，现在集卡活动越来越卷，不但增添了许多的趣味性，比如套圈小游戏很好玩，连活动的入口设计的很精美。

我从中得到了启发，结合看春晚这个全民参与度极高的春节保留项目，设计了一个我觉得十分有趣的作品。

一起看春晚

电视机

这个效果灵感来自支付宝集卡入口的动画，动画中不断有生肖卡从电视中飞出来。

电视柜

一个标签实现电视柜的主体。主体包括柜体、柜门。

柜体是一个椭圆，椭圆的实现不过多介绍了。

柜门的缝隙，缝隙是多条竖线，可以用 box-shadow 实现。

.cabinet {
  position: absolute;
  top: 200px;
  left: 10px;
  width: 300px;
  height: 100px;
  border-radius: 50px;
  background: #fdd4b8;
}
.cabinet::before {
  content: '';
  position: absolute;
  width: 276px;
  height: 76px;
  left: 10px;
  top: 10px;
  border: 2px solid #b68052;
  border-radius: 40px;
  z-index: 2;
}
.cabinet::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 76px;
  left: 0;
  top: 0;
  box-shadow: 72px 12px #f1c4ad, 144px 12px #f1c4ad, 216px 12px #f1c4ad;
  z-index: 1;
}

动画效果

10个账号头像分为左右两组。两组分别设置了动画属性。

头像逐个出现的效果，主要是设置了后续图像的延迟时间，animation-delay 属性可以设置延时时长。

除了延迟时长，每个图像还需要缩短出现时长，才能让逐个出现的效果更加。比如5个图像分别出现，每个展示时长为整个动画的1/5。

.card1 {
  top: 90px;
  left: 80px;
  opacity: 0;
  animation: card1 10s linear infinite;
}
.card1 .card-box {
  transform: rotate(45deg) skewX(30deg) skewY(-15deg);
}
@keyframes card1 {
  0% {
    top: 90px;
    left: 80px;
    opacity: 0;
  }
  20% {
    top: 170px;
    left: 30px;
    opacity: 1;
  }
  25% {
    top: 170px;
    left: 30px;
    opacity: 0.5;
  }
  30%,
  100% {
    top: 170px;
    left: 30px;
    opacity: 0;
  }
}
.youhu,
.captaincc {
  animation-delay: 2s;
}
.troy,
.xiawucha {
  animation-delay: 4s;
}
.xiaopu,
.yoyo {
  animation-delay: 6s;
}
.yizhou,
.click {
  animation-delay: 8s;
}

花架

悬挂式花架，虽然我实际装修不会选择，但是放到画里面感觉还挺好看的。

花架很简单，两层木板结构。

花瓶也很简单，瓶身是椭圆，底部是矩形，瓶口也是矩形。

这束花之前曾经出现过我的那副「小王子、小狐狸与花」。

一个标签实现了花朵，一个标签实现了绿叶，一个标签实现花梗。

.flower {
  position: absolute;
  z-index: 19;
  left: 49px;
  top: -90px;
  transform: rotate(15deg);
}
.flower-petal {
  width: 30px;
  height: 16px;
  border-radius: 100%;
  background: #d7a1a2;
  position: absolute;
  border-bottom: 1px solid #333;
  z-index: 99;
  transform: scale(0.6);
}
.flower-petal::after,
.flower-petal::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 30px;
  background: linear-gradient(to bottom, #bc6273, #d7a1a2);
  top: -18px;
}
.flower-petal::before {
  left: -2px;
  border-radius: 100% 100% 0 20px;
}
.flower-petal::after {
  left: 13px;
  border-radius: 100% 100% 20px 0;
}
.flower-stem {
  width: 2px;
  height: 30px;
  background: #669294;
  position: absolute;
  left: 14px;
  top: 11px;
  z-index: 10;
}
.flower-stem::after,
.flower-stem::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 60px;
  background: #67a2a7;
  z-index: 11;
}
.flower-stem::before {
  left: -16px;
  top: -15px;
  transform: scale(0.2) rotate(-15deg);
  border-radius: 0 200px 0 130px;
}
.flower-stem::after {
  left: -8px;
  top: -18px;
  transform: scale(0.2) rotate(18deg);
  border-radius: 130px 0 200px 0;
}

一副画

本来上面的元素都加上之后，我感觉差不多了，后来看到一副很有趣的画，很喜欢画上的图案。我不善品鉴画作，但是我感觉这个设计十分有趣。

这幅画上是多个半圆环，分行排列，同一排的颜色不同。第一眼给我的感觉是像吸铁石。

半圆环的实现，其实是在圆环的基础之上，通过遮挡实现的。

圆环的效果其实透明圆加了边框，而半圆环则是使用 clip-path 属性实现部分圆环的展示。

.ring {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 50% 50%);
  transform: rotate(-90deg);
  position: absolute;
}
.ring1,
.ring11,
.ring21 {
  border: 6px solid #dc4623;
  left: 3px;
}
.ring2,
.ring12,
.ring22 {
  border: 6px solid #db9b0e;
  left: 27px;
}
.ring3,
.ring13,
.ring23 {
  border: 6px solid #288f76;
  left: 51px;
}

clip-path：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。