html全屏粽子代码

2021年端午节，网上流行了一款特别有趣的html全屏粽子代码。这个代码可以让你的网页变成一个活生生的粽子，让你的用户充满乐趣。

!DOCTYPE HTML>
    html>
      head>
        title>
    端午节快乐！/title>
        style>
      .zongzi {
            position: fixed;
            top: 50%;
            left: 50%;
            background: url('https://cdn.jsdelivr.net/gh/iamjoel/front-end-media/images/zongzi.png') no-repeat;
            background-size: contain;
            width: 300px;
            height: 200px;
            margin-top: -100px;
            margin-left: -150px;
            animation: shake 0.8s linear infinite;
      }
      @keyframes shake {
        0% {
              transform: translate(0, 0) rotate(-10deg);
        }
        50% {
              transform: translate(10px, 0) rotate(10deg);
        }
        100% {
              transform: translate(0, 0) rotate(-10deg);
        }
      }
        /style>
      /head>
      body>
        div class="zongzi">
    /div>
      /body>
    /html>
    

这段代码中，我们首先使用了div> 标签来表示粽子，然后使用了CSS样式来进行布局和动画效果的设置。其中，我们使用了position属性将粽子固定在浏览器窗口中心，使用background属性来添加粽子的背景图片，并使用animation来实现粽子的晃动效果。

要使用这个代码，只需要将它复制到你的网页文件中，然后保存即可。当你的用户访问你的网页时，他们就会看到一个可爱的粽子在屏幕中央晃动，让他们感到惊喜和开心。这也是一种非常有趣的端午节祝福方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！