开往   虫洞   排行榜 统计
  • 文章总数:217 篇
  • 评论总数:595 条
  • 分类总数:6 个
  • 最后更新:一天前

右上角添加悬挂年兽喜增龙年喜气

本文阅读 2 分钟
首页 代码 正文

这篇文章介绍了一个在博客网站右上角添加悬挂年兽的方法。通过在CSS代码中插入相应的素材链接,可以实现在网站右上角挂上一个龙的效果。对于自定义主题的网站,可以将相关的CSS和HTML代码添加到自定义头部中。对于全屏网站,建议在CSS代码的16行左右插入一行代码以实现相应效果。

Test

换新颜新气象,给网站右上角挂一个龙,吸吸龙气

css第6行放入下面素材链接(本站开了防盗所以给你也无用就放下面了)

如果你的主题是自定义,那就是主题设置自定义里面

自定义css

@media screen and (min-width: 850px){
    .NewYear {
        width: 260px;
        height: 300px;
        display: inline-block;
        background: url(图片地址) no-repeat 50%/100%;
        vertical-align: middle;
        position: fixed;
        left: 85.8%;
        top: 55px;
        z-index: 50;
        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放到你的自定义头部html即可!!

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

注意:如果你的是全屏网站建议在pointer-events: none;下面加一行

即css代码16行左右哪里加

z-index: 999;

Test

本文来自投稿,不代表本站立场,如若转载,请注明出处:
-- 展开阅读全文 --
实现时间动态显示的方法
« 上一篇 11-11
新春快乐
下一篇 » 02-10

发表评论

V注册会员 L评论等级
R2 条回复
  1. zlprime - 安徽省
    2024-02-03     MacOS /    Chrome

    这个主题可真好看啊

    1. 喜聞樂見V - 河北省
      2024-02-03     Win 10 /    Chrome

      @zlprime

      嗯嗯

没有更多评论了

作者信息

喜聞樂見
记录生活,分享与留存。
TA的最新作品
    请配置好页面缩略名选项

热门文章

最多点赞

标签TAG

热评文章