devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【前端】HTML+CSS实现卡通蜡烛动漫效果【附源码】

作者：菜鸟追梦旅行 | 2024-03-15 20:52:05

赞

踩

【前端】HTML+CSS实现卡通蜡烛动漫效果【附源码】

效果图：

         向大家介绍如何使用 CSS 和关键帧动画创建一个可爱的蜡烛动画效果。这个动画效果可以用于节日祝福、生日祝福等场合，让网页更加有趣和生动。

HTML代码

        

  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>纯css3卡通蜡烛小人动画特效演示</title>
  7.     <link href="./css/datouwang.css" rel="stylesheet" type="text/css">
  8. </head>
  9.  
  10. <body>
  11.     <div class="wrapper">
  12.         <div class="candles">
  13.             <div class="light__wave"></div>
  14.             <div class="candle1">
  15.                 <div class="candle1__body">
  16.                     <div class="candle1__eyes">
  17.                         <span class="candle1__eyes-one"></span>
  18.                         <span class="candle1__eyes-two"></span>
  19.                     </div>
  20.                     <div class="candle1__mouth"></div>
  21.                 </div>
  22.                 <div class="candle1__stick"></div>
  23.             </div>
  24.             <div class="candle2">
  25.                 <div class="candle2__body">
  26.                     <div class="candle2__eyes">
  27.                         <div class="candle2__eyes-one"></div>
  28.                         <div class="candle2__eyes-two"></div>
  29.                     </div>
  30.                 </div>
  31.                 <div class="candle2__stick"></div>
  32.             </div>
  33.             <div class="candle2__fire"></div>
  34.             <div class="sparkles-one"></div>
  35.             <div class="sparkles-two"></div>
  36.             <div class="candle__smoke-one"></div>
  37.             <div class="candle__smoke-two"></div>
  38.         </div>
  39.         <div class="floor"></div>
  40.     </div>
  41. </body>
  42.  
  43. </html>

<link>标签：


    通过<link>标签引入外部CSS文件datouwang.css，该文件包含了样式定义用于渲染页面元素。

页面结构：

  .wrapper：整体容器，用于包裹所有元素。
    .candles：蜡烛小人容器，包括蜡烛、火焰、眼睛、嘴巴等元素。
        .light__wave：光波效果。
        .candle1和.candle2：两根蜡烛，每根蜡烛包括蜡烛身体、眼睛、眼睛、眼睛、火焰以及支架等部分。
            .candle1__body和.candle2__body：蜡烛的身体部分。
            .candle1__eyes和.candle2__eyes：蜡烛的眼睛部分。
                .candle1__eyes-one、.candle1__eyes-two、.candle2__eyes-one、.candle2__eyes-two：眼睛的具体元素。
            .candle1__mouth：蜡烛1的嘴巴部分。
            .candle1__stick和.candle2__stick：蜡烛的支架部分。
        .candle2__fire：蜡烛2的火焰部分。
        .sparkles-one和.sparkles-two：闪烁效果。
        .candle__smoke-one和.candle__smoke-two：烟雾效果。

 floor：地板部分

CSS结构：

  1. body 部分设置了背景颜色以及一个名为 change-background 的动画，使背景颜色在两种不同的颜色之间循环变化。

  2. .wrapper 是整个动画的容器，通过绝对定位将其放置在页面的中心位置，并进行缩放和偏移。

  3. .floor 是一个代表地面的元素，也进行了绝对定位，并设置了阴影效果。

  4. .candles 是蜡烛的容器，用于包裹所有蜡烛元素。

  5. .candle1 和 .candle2 分别代表两支蜡烛，它们都是绝对定位的白色长方体，通过设置不同的动画效果，让它们看起来像是在跳舞或者闪烁。

  6. .candle1__stick 和 .candle2__stick 是蜡烛的支架，使用绝对定位放置并进行了旋转和移动的动画效果。

  7. .candle1__eyes, .candle2__eyes, .candle1__mouth 以及 .candle__smoke-one, .candle__smoke-two 等元素则是组成蜡烛的眼睛、嘴巴和烟雾等部分，通过不同的动画效果来模拟眨眼、摇晃和吐烟的效果。

  8. 最后还有一些关键帧动画 (@keyframes) 的定义，用于实现上述提到的各种动画效果，比如眨眼、身体放大缩小、火焰舞动等。

  1.  
  2. body {
  3.   background-color: #FEF4AD;
  4.   animation: change-background 3s infinite linear;
  5. }
  6.  
  7. .wrapper {
  8.   position: absolute;
  9.   left: 50%;
  10.   top: 70%;
  11.   transform: scale(1.5, 1.5) translate(-50%, -50%);
  12. }
  13.  
  14. .floor {
  15.   position: absolute;
  16.   left: 50%;
  17.   top: 50%;
  18.   width: 350px;
  19.   height: 5px;
  20.   background: #673C63;
  21.   transform: translate(-50%, -50%);
  22.   box-shadow: 0px 2px 5px #111;
  23.   z-index: 2;
  24. }
  25.  
  26. .candles {
  27.   position: absolute;
  28.   left: 50%;
  29.   top: 50%;
  30.   width: 250px;
  31.   height: 150px;
  32.   transform: translate(-50%, -100%);
  33.   z-index: 1;
  34. }
  35.  
  36. .candle1 {
  37.   position: absolute;
  38.   left: 50%;
  39.   top: 50%;
  40.   width: 35px;
  41.   height: 100px;
  42.   background: #fff;
  43.   border: 3px solid #673C63;
  44.   border-bottom: 0px;
  45.   border-radius: 3px;
  46.   transform-origin: center right;
  47.   transform: translate(60%, -25%);
  48.   box-shadow: -2px 0px 0px #95c6f2 inset;
  49.   animation: expand-body 3s infinite linear;
  50. }
  51.  
  52. .candle1__stick, .candle2__stick {
  53.   position: absolute;
  54.   left: 50%;
  55.   top: 0%;
  56.   width: 3px;
  57.   height: 15px;
  58.   background: #673C63;
  59.   border-radius: 8px;
  60.   transform: translate(-50%, -100%);
  61. }
  62.  
  63. .candle2__stick {
  64.   height: 12px;
  65.   transform-origin: bottom center;
  66.   animation: stick-animation 3s infinite linear;
  67. }
  68.  
  69. .candle1__eyes, .candle2__eyes {
  70.   position: absolute;
  71.   left: 50%;
  72.   top: 0%;
  73.   width: 35px;
  74.   height: 30px;
  75.   transform: translate(-50%, 0%);
  76. }
  77.  
  78. .candle1__eyes-one {
  79.   position: absolute;
  80.   left: 30%;
  81.   top: 20%;
  82.   width: 5px;
  83.   height: 5px;
  84.   border-radius: 100%;
  85.   background: #673C63;
  86.   transform: translate(-70%, 0%);
  87.   animation: blink-eyes 3s infinite linear;
  88. }
  89.  
  90. .candle1__eyes-two {
  91.   position: absolute;
  92.   left: 70%;
  93.   top: 20%;
  94.   width: 5px;
  95.   height: 5px;
  96.   border-radius: 100%;
  97.   background: #673C63;
  98.   transform: translate(-70%, 0%);
  99.   animation: blink-eyes 3s infinite linear;
  100. }
  101.  
  102. .candle1__mouth {
  103.   position: absolute;
  104.   left: 40%;
  105.   top: 20%;
  106.   width: 0px;
  107.   height: 0px;
  108.   border-radius: 20px;
  109.   background: #673C63;
  110.   transform: translate(-50%, -50%);
  111.   animation: uff 3s infinite linear;
  112. }
  113.  
  114. .candle__smoke-one {
  115.   position: absolute;
  116.   left: 30%;
  117.   top: 50%;
  118.   width: 30px;
  119.   height: 3px;
  120.   background: grey;
  121.   transform: translate(-50%, -50%);
  122.   animation: move-left 3s infinite linear;
  123. }
  124.  
  125. .candle__smoke-two {
  126.   position: absolute;
  127.   left: 30%;
  128.   top: 40%;
  129.   width: 10px;
  130.   height: 10px;
  131.   border-radius: 10px;
  132.   background: grey;
  133.   transform: translate(-50%, -50%);
  134.   animation: move-top 3s infinite linear;
  135. }
  136.  
  137. .candle2 {
  138.   position: absolute;
  139.   left: 20%;
  140.   top: 65%;
  141.   width: 42px;
  142.   height: 60px;
  143.   background: #fff;
  144.   border: 3px solid #673C63;
  145.   border-bottom: 0px;
  146.   border-radius: 3px;
  147.   transform: translate(60%, -15%);
  148.   transform-origin: center right;
  149.   box-shadow: -2px 0px 0px #95c6f2 inset;
  150.   animation: shake-left 3s infinite linear;
  151. }
  152.  
  153. .candle2__eyes-one {
  154.   position: absolute;
  155.   left: 30%;
  156.   top: 50%;
  157.   width: 5px;
  158.   height: 5px;
  159.   display: inline-block;
  160.   border: 0px solid #673C63;
  161.   border-radius: 100%;
  162.   float: left;
  163.   background: #673C63;
  164.   transform: translate(-80%, 0%);
  165.   animation: changeto-lower 3s infinite linear;
  166. }
  167.  
  168. .candle2__eyes-two {
  169.   position: absolute;
  170.   left: 70%;
  171.   top: 50%;
  172.   width: 5px;
  173.   height: 5px;
  174.   display: inline-block;
  175.   border: 0px solid #673C63;
  176.   border-radius: 100%;
  177.   float: left;
  178.   background: #673C63;
  179.   transform: translate(-80%, 0%);
  180.   animation: changeto-greater 3s infinite linear;
  181. }
  182.  
  183. .light__wave {
  184.   position: absolute;
  185.   top: 35%;
  186.   left: 35%;
  187.   width: 75px;
  188.   height: 75px;
  189.   border-radius: 100%;
  190.   z-index: 0;
  191.   transform: translate(-25%, -50%) scale(2.5, 2.5);
  192.   border: 2px solid rgba(255, 255, 255, 0.2);
  193.   animation: expand-light 3s infinite linear;
  194. }
  195.  
  196. .candle2__fire {
  197.   position: absolute;
  198.   top: 50%;
  199.   left: 40%;
  200.   display: block;
  201.   width: 16px;
  202.   height: 20px;
  203.   background-color: red;
  204.   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  205.   background: #FF9800;
  206.   transform: translate(-50%, -50%);
  207.   animation: dance-fire 3s infinite linear;
  208. }
  209.  
  210. @keyframes blink-eyes {
  211.   0%,35% {
  212.     opacity: 1;
  213.     transform: translate(-70%, 0%);
  214.   }
  215.   36%,39% {
  216.     opacity: 0;
  217.     transform: translate(-70%, 0%);
  218.   }
  219.   40% {
  220.     opacity: 1;
  221.     transform: translate(-70%, 0%);
  222.   }
  223.   50%,65% {
  224.     transform: translate(-140%, 0%);
  225.   }
  226.   66% {
  227.     transform: translate(-70%, 0%);
  228.   }
  229. }
  230. @keyframes expand-body {
  231.   0%,40% {
  232.     transform: scale(1, 1) translate(60%, -25%);
  233.   }
  234.   45%,55% {
  235.     transform: scale(1.1, 1.1) translate(60%, -28%);
  236.   }
  237.   60% {
  238.     transform: scale(0.89, 0.89) translate(60%, -25%);
  239.   }
  240.   65% {
  241.     transform: scale(1, 1) translate(60%, -25%);
  242.   }
  243.   70% {
  244.     transform: scale(0.95, 0.95) translate(60%, -25%);
  245.   }
  246.   75% {
  247.     transform: scale(1, 1) translate(60%, -25%);
  248.   }
  249. }
  250. @keyframes uff {
  251.   0%,40% {
  252.     width: 0px;
  253.     height: 0px;
  254.   }
  255.   50%,54% {
  256.     width: 15px;
  257.     height: 15px;
  258.     left: 30%;
  259.   }
  260.   59% {
  261.     width: 5px;
  262.     height: 5px;
  263.     left: 20%;
  264.   }
  265.   62% {
  266.     width: 2px;
  267.     height: 2px;
  268.     left: 20%;
  269.   }
  270.   67% {
  271.     width: 0px;
  272.     height: 0px;
  273.     left: 30%;
  274.   }
  275. }
  276. @keyframes change-background {
  277.   0%,59%,98%,100% {
  278.     background: #FEF4AD;
  279.   }
  280.   61%,97% {
  281.     background: #F8AE39;
  282.   }
  283. }
  284. @keyframes move-left {
  285.   0%,59%,100% {
  286.     width: 0px;
  287.     left: 40%;
  288.   }
  289.   60% {
  290.     width: 30px;
  291.     left: 30%;
  292.   }
  293.   68% {
  294.     width: 0px;
  295.     left: 20%;
  296.   }
  297. }
  298. @keyframes move-top {
  299.   0%,64%,100% {
  300.     width: 0px;
  301.     height: 0px;
  302.     top: 0%;
  303.   }
  304.   65% {
  305.     width: 10px;
  306.     height: 10px;
  307.     top: 40%;
  308.     left: 40%;
  309.   }
  310.   80% {
  311.     width: 0px;
  312.     height: 0px;
  313.     top: 20%;
  314.   }
  315. }
  316. @keyframes shake-left {
  317.   0%,40% {
  318.     left: 20%;
  319.     transform: translate(60%, -15%);
  320.   }
  321.   50%,54% {
  322.     left: 20%;
  323.     transform: translate(60%, -15%);
  324.   }
  325.   59% {
  326.     left: 20%;
  327.     transform: translate(60%, -15%);
  328.   }
  329.   62% {
  330.     left: 18%;
  331.     transform: translate(60%, -15%);
  332.   }
  333.   65% {
  334.     left: 21%;
  335.     transform: translate(60%, -15%);
  336.   }
  337.   67% {
  338.     left: 20%;
  339.     transform: translate(60%, -15%);
  340.   }
  341.   75% {
  342.     left: 20%;
  343.     transform: scale(1.15, 0.85) translate(60%, -15%);
  344.     background: #fff;
  345.     border-color: #673C63;
  346.   }
  347.   91% {
  348.     left: 20%;
  349.     transform: scale(1.18, 0.82) translate(60%, -10%);
  350.     background: #F44336;
  351.     border-color: #F44336;
  352.     box-shadow: -2px 0px 0px #F44336 inset;
  353.   }
  354.   92% {
  355.     left: 20%;
  356.     transform: scale(0.85, 1.15) translate(60%, -15%);
  357.   }
  358.   95% {
  359.     left: 20%;
  360.     transform: scale(1.05, 0.95) translate(60%, -15%);
  361.   }
  362.   97% {
  363.     left: 20%;
  364.     transform: scale(1, 1) translate(60%, -15%);
  365.   }
  366. }
  367. @keyframes stick-animation {
  368.   0%,40% {
  369.     left: 50%;
  370.     top: 0%;
  371.     transform: translate(-50%, -100%);
  372.   }
  373.   50%,54% {
  374.     left: 50%;
  375.     top: 0%;
  376.     transform: translate(-50%, -100%);
  377.   }
  378.   59% {
  379.     left: 50%;
  380.     top: 0%;
  381.     transform: translate(-50%, -100%);
  382.   }
  383.   62% {
  384.     left: 50%;
  385.     top: 0%;
  386.     transform: rotateZ(-15deg) translate(-50%, -100%);
  387.   }
  388.   65% {
  389.     left: 50%;
  390.     top: 0%;
  391.     transform: rotateZ(15deg) translate(-50%, -100%);
  392.   }
  393.   70% {
  394.     left: 50%;
  395.     top: 0%;
  396.     transform: rotateZ(-5deg) translate(-50%, -100%);
  397.   }
  398.   72% {
  399.     left: 50%;
  400.     top: 0%;
  401.     transform: rotateZ(5deg) translate(-50%, -100%);
  402.   }
  403.   74%,84% {
  404.     left: 50%;
  405.     top: 0%;
  406.     transform: rotateZ(0deg) translate(-50%, -100%);
  407.   }
  408.   85% {
  409.     transform: rotateZ(180deg) translate(0%, 120%);
  410.   }
  411.   92% {
  412.     left: 50%;
  413.     top: 0%;
  414.     transform: translate(-50%, -100%);
  415.   }
  416. }
  417. @keyframes expand-light {
  418.   10%,29%,59%,89% {
  419.     transform: translate(-25%, -50%) scale(0, 0);
  420.     border: 2px solid rgba(255, 255, 255, 0);
  421.   }
  422.   90%,20%,50% {
  423.     transform: translate(-25%, -50%) scale(1, 1);
  424.   }
  425.   95%,96%,26%,27%,56%,57% {
  426.     transform: translate(-25%, -50%) scale(2, 2);
  427.     border: 2px solid rgba(255, 255, 255, 0.5);
  428.   }
  429.   0%,28%,58%,100% {
  430.     transform: translate(-25%, -50%) scale(2.5, 2.5);
  431.     border: 2px solid rgba(255, 255, 255, 0.2);
  432.   }
  433. }
  434. @keyframes dance-fire {
  435.   59%,89% {
  436.     left: 40%;
  437.     width: 0px;
  438.     height: 0px;
  439.   }
  440.   90%,0%,7%,15%,23%,31%,39%,47%,55% {
  441.     left: 40.8%;
  442.     width: 16px;
  443.     height: 20px;
  444.     background: #FFC107;
  445.   }
  446.   94%,3%,11%,19%,27%,35%,43%,51%,58% {
  447.     left: 41.2%;
  448.     width: 16px;
  449.     height: 20px;
  450.     background: #FF9800;
  451.   }
  452. }
  453. @keyframes changeto-lower {
  454.   0%,70%,90% {
  455.     padding: 0px;
  456.     display: inline-block;
  457.     border-radius: 100%;
  458.     background: #673C63;
  459.     border-width: 0 0 0 0;
  460.     border: 0px solid #673C63;
  461.     transform: translate(-90%, 0%);
  462.   }
  463.   71%,89% {
  464.     background: none;
  465.     border: solid #673C63;
  466.     border-radius: 0px;
  467.     border-width: 0 2px 2px 0;
  468.     display: inline-block;
  469.     padding: 1px;
  470.     float: left;
  471.     transform-origin: bottom left;
  472.     transform: rotate(-45deg) translate(-50%, -65%);
  473.     -webkit-transform: rotate(-45deg) translate(-50%, -65%);
  474.   }
  475. }
  476. @keyframes changeto-greater {
  477.   0%,70%,90% {
  478.     top: 50%;
  479.     padding: 0px;
  480.     display: inline-block;
  481.     border-radius: 100%;
  482.     background: #673C63;
  483.     border-width: 0 0 0 0;
  484.     border: 0px solid #673C63;
  485.     transform: translate(-80%, 0%);
  486.   }
  487.   71%,89% {
  488.     top: 30%;
  489.     background: none;
  490.     border: solid #673C63;
  491.     border-radius: 0px;
  492.     border-width: 0 2px 2px 0;
  493.     display: inline-block;
  494.     padding: 1px;
  495.     float: left;
  496.     transform-origin: bottom left;
  497.     transform: rotate(135deg) translate(-80%, 20%);
  498.     -webkit-transform: rotate(135deg) translate(-80%, 20%);
  499.   }
  500. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/244433
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号