首页添加悬挂年兽，给博客喜增新年气氛

第一版

源代码来自于优知新

css代码

@media screen and (min-width: 850px){
    .NewYear {
        width: 150px;
        height: 200px;
        display: inline-block;
        background: url(https://www.tfbkw.com/wp-content/uploads/2023/12/newyear.png) no-repeat 50%/100%;
        vertical-align: middle;
        position: fixed;
        left: 90%;
        top: 55px;
        z-index: 999;
        cursor: pointer;
        animation: new-year 1.2s ease-in-out 0s infinite alternate;
        margin-left: -1px;
        transform-origin: 50% 0;
        pointer-events: none;
    }
    }
    @keyframes new-year{
      0% {
        transform: rotate(10deg);
    }
      100%{
                transform: rotate(-10deg);
      }
    }

html代码

<div class="NewYear"></div>

第二版

css代码

@media screen and (min-width: 850px){
    .NewYear {
        width: 200px;
        height: 200px;
        display: inline-block;
        background: url(https://cn-sy1.rains3.com/anxkj.fun/tu02.webp) no-repeat 50%/100%;
        vertical-align: middle;
        position: fixed;
        left: 80%;
        top: 25px;
        z-index: 50;
        cursor: pointer;
        animation: new-year 1.2s ease-in-out 0s infinite alternate;
        margin-left: -25px;
        transform-origin: 50% 0;
        pointer-events:none;
        z-index: 999;
    }
    }
    @keyframes new-year{
      0% {
        transform: rotate(10deg);
    }
      100%{
                transform: rotate(-10deg);
      }
    }

html代码

<div class="NewYear"></div>