51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术24年11月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
账号设置 退出

HarmonyOS - 纯CSS实现吹灭蜡烛动画

作者：炒栗子
系统 OpenHarmony
为了体验鸿蒙应用开发，决定动手实现一个案例——通过Css动画实现吹灭蜡烛动画，看了一下鸿蒙应用开发文档，有js和ets两种开发方式，综合考量了一下，决定采用js方式实现。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​

前言

前段时间HarmonyOS 3发布了，吸引了不少的眼球，为了体验鸿蒙应用开发，决定动手实现一个案例——通过css动画实现吹灭蜡烛动画，看了一下鸿蒙应用开发文档，有js和ets两种开发方式，综合考量了一下，决定采用js方式实现。

效果展示

HarmonyOS - 纯CSS实现吹灭蜡烛动画-开源基础软件社区

实现思路

  1. 通过变换translate()的X轴位置，实现最右边蜡烛眼睛移动效果。
  2. 通过改变height、width和left属性实现最右边蜡烛的嘴巴吹起动画。
  3. 通过scale()和translate()动画函数实现最右侧蜡烛吹起过程的身体变化。
  4. 通过改变left属性实现最左侧蜡烛的水平方向的烟雾。
  5. 通过改变left和top属性实现最左侧蜡烛的竖直方向的烟雾。
  6. 通过变换translate()的Y轴方向、scale()、background-color、box-shadow和border-color实现蜡烛被吹灭时左移效果和蜡烛摩擦生火体色的变化。
  7. 通过translate()和rotateZ()函数实现蜡烛被吹灭时的左右抖动以及烛芯摩擦生火动画。
  8. 通过border透明度、translate()和scale()实现烛光点燃时产生的光晕。
  9. 通过backgroun-color、left、width和height实现火焰闪烁效果，通过translate-origin、rotate()和translate()实现眨眼效果。
  10. 通过background-color变化实现背景明暗变化。

组件实现

1、hml代码

分为三部分：最左边的蜡烛、最右边的蜡烛和底座；最右边蜡烛由烛芯、火焰、眼睛、嘴巴和烛体构成，最左边蜡烛由烛芯、眼睛、烛体、火焰和烟雾组成。

<div class="page">
  <div class="wrapper">
    <div class="candles">
      <!-- 背景光 -->
      <div class="light_wave"></div>
    <!-- 最右边蜡烛 -->
      <div class="candle1">
        <div class="candle1_body">
          <div class="candle1_eyes">
            <div class="candle1_eyes-left"></div>
            <div class="candle1_eyes-right"></div>
          </div>
          <div class="candle1_mouth"></div>
        </div>
        <div class="candle1_stick"></div>
      </div>
    <!-- 最左边蜡烛 -->
      <div class="candle2">
        <div class="candle2_body">
          <div class="candle2_eyes">
            <div class="candle2_eyes-left"></div>
            <div class="candle2_eyes-right"></div>
          </div>
        </div>
        <div class="candle2_stick"></div>
        <div class="candle2_fire"></div>
      </div>
    <!-- 烟雾 -->
      <div class="candle_smoke1"></div>
      <div class="candle_smoke2"></div>
    </div>
    <!-- 底座 -->
    <div class="floor"></div>
  </div>
</div>

2、css代码

实现了最右边蜡烛眼睛向左看、嘴巴对最左边蜡烛的火焰吹气的动画和吸气形体变化的动画。

实现了最左边蜡烛的火焰闪烁、火焰被吹灭时产生的烟雾动效、烛芯扰动和蜡烛向左偏移的效果，蜡烛摩擦生火的效果。

.page {
  height: 100%;
  width: 100%;
  background-color: #FFF;
  animation: change-background 3s infinite linear;
}
.floor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 9px;
  margin: 0px 80px;
  background-color: #673C63;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 5px #111;
  z-index: 2;
}
.candles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 150px;
  transform: translate(-50%, -100%);
  z-index: 1;
}
.candle1 {
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100;
  width: 35px;
  height: 100px;
  background-color: #ffffff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform-origin: right center;
  transform: translate(60%, -25%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: expand-body 3s infinite linear;
}
.candle1_body {
  flex-direction: column;
}
.candle1_stick, .candle2_stick {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 3px;
  height: 15px;
  background-color: #673C63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}
.candle2_stick {
  height: 12px;
  transform-origin: center bottom;
  animation: stick-animation 3s infinite linear;
}
.candle1_eyes, .candle2_eyes {
  position: absolute;
  z-index: 1000;
  left: 50%;
  top: 0%;
  width: 35px;
  height: 30px;
  transform: translate(-50%, 0%);
}
.candle1_eyes-left {
  position: absolute;
  z-index: 1000;
  left: 40%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background-color: #673C63;
  transform: translate(-70%, 0%);
  animation: blink-eyes 3s infinite linear;
}
.candle1_eyes-right {
  position: absolute;
  z-index: 1000;
  left: 80%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #673C63;
  transform: translate(-70%, 0%);
  animation: blink-eyes 3s infinite linear;
}

.candle1_mouth {
  position: absolute;
  left: 40%;
  top: 20%;
  width: 0px;
  height: 0px;
  border-radius: 20px;
  background-color: #673C63;
  transform: translate(-50%, -50%);
  animation: uff 3s infinite linear;
}
.candle_smoke1 {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 30px;
  height: 3px;
  background-color: grey;
  transform: translate(-50%, -50%);
  animation: move-left 3s infinite linear;
}
.candle_smoke2 {
  position: absolute;
  left: 30%;
  top: 40%;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: grey;
  transform: translate(-50%, -50%);
  animation: move-top 3s infinite linear;
}
.candle2 {
  position: absolute;
  left: 20%;
  top: 65%;
  z-index: 100;
  width: 42px;
  height: 60px;
  background-color: #FFFFFF;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform: translate(60%, -15%);
  transform-origin: right center;
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: shake-left 3s infinite linear;
}
.candle2_eyes {
  flex-direction: column;
}
.candle2_eyes-left {
  position: absolute;
  left: 40%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: flex;
  border: 0px solid #673C63;
  border-radius: 5px;
  background-color: #673C63;
  transform: translate(-80%, 0%);
  animation: changeto-lower 3s infinite linear;
}

.candle2_eyes-right {
  position: absolute;
  left: 80%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: flex;
  border: 0px solid #673C63;
  border-radius: 5px;
  background-color: #673C63;
  transform: translate(-80%, 0%);
  animation: changeto-greater 3s infinite linear;
}
.light_wave {
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75px;
  height: 75px;
  border-radius: 75px;
  z-index: 0;
  transform: translate(0%, 70%) scale(2.5, 2.5);
  border: 2px solid #FFFFFF;
  opacity: 0.2;
  animation: expand-light 3s infinite linear;
}

.candle2_fire {
  position: absolute;
  z-index: 1000;
  top: -20px;
  left: 50%;
  display: flex;
  width: 16px;
  height: 20px;
  background-color: red;
  border-radius: 20px;
  background-color: #ff9800;
  transform: translate(-40%, -50%);
  animation: dance-fire 3s infinite linear;
}
/* 最右侧蜡烛眼睛闪烁 */
@keyframes blink-eyes {
  0% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  35% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  36% {
    opacity: 0;
    transform: translate(-70%, 0%);
  }
  39% {
    opacity: 0;
    transform: translate(-70%, 0%);
  }
  40% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  50% {
    transform: translate(-140%, 0%);
  }
  65% {
    transform: translate(-140%, 0%);
  }
  66% {
    transform: translate(-70%, 0%);
  }
}
/* 最右侧蜡烛吸气形体变化 */
@keyframes expand-body {
  0% {
    transform: scale(1, 1) translate(60%, 0%);
  }
  40% {
    transform: scale(1, 1) translate(60%, 0%);
  }
  45% {
    transform: scale(1.1, 1.1) translate(60%, 0%);
  }
  55% {
    transform: scale(1.1, 1.1) translate(60%, 0%);
  }
  60% {
    transform: scale(0.89, 0.89) translate(60%, 0%);
  }
  65% {
    transform: scale(1, 1) translate(60%, 0%);
  }
  70% {
    transform: scale(0.95, 0.95) translate(60%, 0%);
  }
  75% {
    transform: scale(1, 1) translate(60%, 0%);
  }
}
/* 最右侧蜡烛口型变化 */
@keyframes uff {
  0% {
    width: 0px;
    height: 0px;
  }
  40% {
    width: 0px;
    height: 0px;
  }
  50% {
    width: 15px;
    height: 15px;
    left: 30%;
  }
  54% {
    width: 15px;
    height: 15px;
    left: 30%;
  }
  59% {
    width: 5px;
    height: 5px;
    left: 20%;
  }
  62% {
    width: 2px;
    height: 2px;
    left: 20%;
  }
  67% {
    width: 0px;
    height: 0px;
    left: 30%;
  }
}
/* 光影背景变化 */
@keyframes change-background {
  0% {
    background-color: #fff;
  }
  59% {
    background-color: #fff;
  }
  61% {
    background-color: #000;
  }
  97% {
    background-color: #000;
  }
  98% {
    background-color: #fff;
  }
  100% {
    background-color: #fff;
  }
}
/* 最左侧蜡烛熄灭的水平方向烟雾 */
@keyframes move-left {
  0% {
    width: 0px;
    left: 40%;
  }
  59% {
    width: 0px;
    left: 40%;
  }
  60% {
    width: 30px;
    left: 30%;
  }
  68% {
    width: 0px;
    left: 20%;
  }
  100% {
    width: 0px;
    left: 40%;
  }
}
/* 最左侧蜡烛熄灭的竖直方向的烟雾 */
@keyframes move-top {
  0% {
    width: 0px;
    height: 0px;
    top: 0%;
  }
  64% {
    width: 0px;
    height: 0px;
    top: 0%;
  }
  65% {
    width: 10px;
    height: 10px;
    top: 40%;
    left: 40%;
  }
  80% {
    width: 0px;
    height: 0px;
    top: 20%;
  }
  100% {
    width: 0px;
    height: 0px;
    top: 0%;
  }
}
/* 最左侧蜡烛熄灭的向左偏移及蜡烛摩擦生火体色的变化 */
@keyframes shake-left {
  0% {
    left: 20%;
    background-color: #FFFFFF;
    border: 3px solid #673C63;
    border-bottom: 0px;
    border-radius: 3px;
  }
  40% {
    left: 20%;
    background-color: #FFFFFF;
    border: 3px solid #673C63;
    border-bottom: 0px;
    border-radius: 3px;
  }
  50% {
    left: 20%;
    transform: translate(60%, 5%);
  }
  54% {
    left: 20%;
    transform: translate(60%, 5%);
  }
  59% {
    left: 20%;
    transform: translate(60%, 5%);
  }
  62% {
    left: 18%;
    transform: translate(60%, 5%);
  }
  67% {
    left: 20%;
    transform: translate(60%, 5%);
  }
  75% {
    left: 20%;
    transform: scale(1.15, 0.85) translate(60%, 5%);
    background-color: #fff;
    border-color: #673C63;
  }
  91% {
    left: 20%;
    transform: scale(1.18, 0.82) translate(60%, 5%);
    background-color: #f44336;
    border-color: #f44336;
    box-shadow: -2px 0px 0px #f44336 inset;
  }
  92% {
    left: 20%;
    transform: scale(0.85, 0.95) translate(60%, 5%);
  }
  95% {
    left: 20%;
    transform: scale(1.05, 0.95) translate(60%, 5%);
  }
  97% {
    left: 20%;
    transform: scale(1, 1) translate(60%, 5%);
  }
}
/* 最左侧蜡烛熄灭时烛芯扰动和摩擦生火 */
@keyframes stick-animation {
  0% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, 0%);
  }
  40% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, 0%);
  }
  50% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, 0%);
  }
  54% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, 0%);
  }
  59% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, 0%);
  }
  62% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-15deg) translate(-50%, 0%);
  }
  65% {
    left: 50%;
    top: 0%;
    transform: rotateZ(15deg) translate(-50%, 0%);
  }
  70% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-5deg) translate(-50%, 0%);
  }
  72% {
    left: 50%;
    top: 0%;
    transform: rotateZ(5deg) translate(-50%, 0%);
  }
  74% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, 0%);
  }
  84% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, 0%);
  }
  85% {
    transform: rotateZ(180deg) translate(-50%, 0%);
  }
  92% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, 0%);
  }
  93% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, 0%);
  }
}
/* 最左侧蜡烛火焰光圈变化 */
@keyframes expand-light {
  0% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid #FFFFFF;
    opacity: 0.2;
  }
  10% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid #FFFFFF;
    opacity: 0;
  }
  20% {
    transform: translate(-25%, -50%) scale(1, 1);
  }
  26% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid #FFFFFF;
    opacity: 0.5;
  }
  27% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid #FFFFFF;
    opacity: 0.5;
  }
  28% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid #FFFFFF;
    opacity: 0.2;
  }
  29% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid #FFFFFF;
    opacity: 0;
  }
  58% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid #FFFFFF;
    opacity: 0.2;
  }
  50% {
    transform: translate(-25%, -50%) scale(1, 1);
  }
  56% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid #FFFFFF;
    opacity: 0.5;
  }
  57% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid #FFFFFF;
    opacity: 0.5;
  }
  59% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid #FFFFFF;
    opacity: 0;
  }
  90% {
    transform: translate(-25%, -50%) scale(1, 1);
  }
  95% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid #FFFFFF;
    opacity: 0.5;
  }
  96% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid #FFFFFF;
    opacity: 0.5;
  }
  89% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid #FFFFFF;
    opacity: 0;
  }
  100% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid #FFFFFF;
    opacity: 0.2;
  }
}
/* 最左侧蜡烛火焰跳动 */
@keyframes dance-fire {
  0% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  3% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
  7% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  11% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
  15% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  19% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
  23% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  27% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
  31% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  35% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
  39% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  43% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
  47% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  51% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
  55% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  58% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
  59% {
    left: 40%;
    width: 0px;
    height: 0px;
  }
  89% {
    left: 40%;
    width: 0px;
    height: 0px;
  }
  90% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background-color: #FFC107;
  }
  94% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background-color: #FF9800;
  }
}
/* 最左侧蜡烛摩擦生火的眼睛变小 */
@keyframes changeto-lower {
  0%{
    padding: 0px;
    display: flex;
    border-radius: 5px;
    background-color: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-90%, 0%);
  }
  70% {
    padding: 0px;
    display: flex;
    border-radius: 5px;
    background-color: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-90%, 0%);
  }
  89% {
    background-color: rgba(0, 0,0,0);
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: flex;
    padding: 1px;
    float: left;
    transform-origin: 100% 0%;
    transform: rotate(-45deg) translate(-50%, -65%);
  }
  90% {
    padding: 0px;
    display: flex;
    border-radius: 5px;
    background-color: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-90%, 0%);
  }
  71% {
    background-color: rgba(0, 0,0,0);
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: flex;
    padding: 1px;
    float: left;
    transform-origin: 100% 0%;
    transform: rotate(-45deg) translate(-50%, -65%);
  }
}
/* 最左侧蜡烛摩擦生火的眼睛变大 */
@keyframes changeto-greater {
  0% {
    top: 50%;
    padding: 0px;
    display: flex;
    border-radius: 10px;
    background-color: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-80%, 0%);
  }
  70% {
    top: 50%;
    padding: 0px;
    display: flex;
    border-radius: 10px;
    background-color: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-80%, 0%);
  }
  89% {
    top: 30%;
    background-color: rgba(0, 0,0,0);
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: flex;
    padding: 1px;
    float: left;
    transform-origin: 100% 0%;
    transform: rotate(135deg) translate(-80%, 20%);
  }
  90% {
    top: 50%;
    padding: 0px;
    display: flex;
    border-radius: 10px;
    background-color: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-80%, 0%);
  }
  71% {
    top: 30%;
    background-color: rgba(0, 0,0,0);
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: flex;
    padding: 1px;
    float: left;
    transform-origin: 100% 0%;
    transform: rotate(135deg) translate(-80%, 20%);
  }
}

总结

基于js扩展的类web范式开发的css样式和标准的css有所不同，个人最直观感受有以下几点：

  1. 它不支持border属性里使用rgba()函数。
  2. 不支持background合并属性书写。
  3. hml的元素display默认值为flex，容器内元素默认横向排列。
  4. position的absolute定位相对的是父组件，z-index决定的是元素的渲染顺序，未设置position也能够使用。
  5. 此外，动画的火焰有点瑕疵，由于js扩展的类web范式开发的css样式不支持border-radius使用/分隔多组属性，蜡烛火焰没能实现宝塔形，只实现了坚果形。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​。

责任编辑：jianghua 来源： 鸿蒙社区
应用开发css动画
相关推荐
纯CSS方式实现CSS动画的暂停与播放！
使用纯CSS的方法，能否暂停、播放CSS动画看起来不可能，至少很麻烦。本文介绍代码来实现了纯CSS方式实现CSS动画的暂停与播放。

2017-04-27 14:05:59

CSS动画前端
Android动画之萌萌哒蜡烛吹蜡烛动画
最近开始写一些文章记录一下以前的一些自己写的小项目或者是定义View积累，积灰的东西还是要多翻出来整理整理看看的。这个只完成了一部分燃起熄灭的动画，没有为何燃起火焰的动画，希望有兴趣的同学也可以接着完成并分享。

2017-02-07 11:35:26

Android动画蜡烛动画
前端: 轻松教你使用纯css实现水波动画
下面就是笔者就来带大家介绍如何用css3实现H5Dooring编辑器中的水波动画。

2022-03-28 08:44:15

css3水波动画
前端: 轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很多便利,我们可以使用css3的新特性实现各种形状和动效,接下来笔者就来带大家介绍如何用css3实现H5Dooring编辑器中的水波动画.

2021-02-09 07:26:38

前端css技术热点
使用纯Css实现网站换肤和焦点图切换动画
为了辅助标识那些指向文档特定部分链接的目标,CSS3选择器引入了:target伪类.:target伪类用来指定那些包含片段标识符的URI的目标元素样式。

2022-09-12 08:31:41

CSS3伪类URI
纯CSS实现跑马灯效果，CSS动画知识是该补一补了
最近看一个网站的时候，发现一个效果类似于广告灯的感觉，挺不错的，于是就想用纯CSS来实现这个效果，顺便提升一下自己的CSS动画技能

2023-11-01 08:33:45

CSS动画效果
纯 CSS 实现 Beautiful 按钮
近期工作中遇到一个需求——实现一些酷炫的按钮，看到效果图之后，按钮确实漂亮，有弹跳、颜色渐变、扫光、霓虹灯，瞬间激起了我的好奇心，开启了研究实现之路。

2021-10-19 22:23:47

CSSBeautiful按钮
纯CSS实现电梯导航！
通常要实现这样一个交互肯定少不了JS，常规的做法是监听滚动事件，也可以用IntersectionObserver监听元素的滚动位置状态。

2024-08-29 08:13:58

我用纯 CSS 实现了一个冒泡排序动画
如果你在Codepen上操作代码，那么在移动设备上，最后几个动画可能无法播放，显示为空白；而在PC上，CPU风扇可能会转起来！

2024-03-13 08:21:53

冒泡排序动画
纯CSS3画出小黄人并实现动画效果
前两天我刚发布了一篇CSS3实现小黄人动画的博客，但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片，并自己用PS抠出需要实现动画的部分，最后才完成的动画效果。

2017-05-03 11:30:20

CSS3小黄人动画
聊聊纯 CSS 实现 Beautiful 按钮
实现这些漂亮的按钮主要利用了一些CSS的属性，主要有animation、backgroundsize、backgroundposition、lineargradient(),下面对这四个内容进行简要概述。

2022-02-21 07:02:16

CSSbeautiful按钮
OpenHarmony - 纯CSS实现卡通狮子
在做鸿蒙项目过程中，发现在H5用的CSS的式样在鸿蒙上有些属性不支持，显示效果不一样，所以做了一个卡通狮子帮助更好的在鸿蒙中熟悉CSS的用法。

2022-08-10 16:08:38

鸿蒙CSS
纯CSS实现密室逃脱游戏
“密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。

2020-11-04 13:55:06

CSS密室逃脱前端
日历图标的纯CSS实现
我们需要用一个外围元素，在这里用的是p元素（或者使用HTML5中的新元素——TIME）。在这个外围元素中我们还需要一个包含着月份的元素。

2013-04-08 14:07:28

CSS
纯CSS实现常见的UI效果
在用纯CSS实现这些效果之前，笔者先介绍几个常用的SCSSMixin和一个得力武器，用它们来进行创作将会事半功倍。

2021-01-19 12:16:10

CSS前端UI
纯HTML+CSS实现阿童木头像
他有十万马力，能上天能入地；他分辨善恶，是勇敢正义化身；1963年，他登上荧幕，在日本创下了未曾有过的高收视率……他叫阿童木，一个纯真、善良、勇敢的机器娃娃。“阿童木之父”手冢治虫曾说，将阿童木生日定在2003年4月7日。你的童年记忆中，有这个发型尖尖的少年吗？

2015-04-24 10:05:15

HTML+CSS阿童木头像
纯Css实现旋转的金字塔
css是个神奇的东西，在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一，设计精巧，计算精密，令世人赞叹。那么如何用CSS画一个金字塔呢？

2021-01-25 06:37:06

Css前端CSS 特效
纯 CSS 实现标签自动显示超出数量
1.计数累加器可以放在滚动驱动动画中，这样在动画触发时也就相当于计数器生效了，这样就能统计可视区的标签数量了。

2024-05-09 00:00:00

CSS标签JavaScript
使用 CSS 渐变来实现波浪动画
这次尝试一下使用CSS渐变来实现这样一个效果，还可以用在文字背景上。

2023-06-05 09:28:32

CSS渐变
纯 CSS 实现的三种扫光效果
由于扫光在文本内部，所以需要将这个渐变作为文本的颜色。文本渐变色，可以用backgrondclip:text来实现，假设HTML是这样的。

2024-07-31 20:38:18

点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服