nohapa
  • 累计撰写 19 篇文章
  • 累计收到 0 条评论

给你的网站博客添加牛年特效红灯笼js代码

nohapa
2021-02-19 / 0 评论 / 14 阅读 / 正在检测是否收录...

1.效果如下图所示

hongdelong.JPG

2.自定义内容

自定义灯笼字体

/* 修改灯笼的字体 */
.d-box .d1::after{
    content: '牛年吉祥';}
.d-box1 .d1::after{
    content: '万事顺利';
}

自定义灯笼大小,位置

.d-box{
    position: fixed;
    width: 330px;
    /* 自定义灯笼的位置 */
    right: 0;
    top: 0;
    /* 自定义灯笼大小 */
    transform: scale(0.8);
}
.d-box1{
    position: fixed;
    width: 330px;
    /* 自定义灯笼的位置 */
    left: 0;
    top: 0;
    /* 自定义灯笼大小 */
    transform: scale(0.8);
}

3.使用方法

  • 直接引用index.html中的body里面的内容
  • 加入dl.css,新增js

将下面的链接复制到页面即可使用
在header标签里面加入<div class="dengl"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Rr210/Lantern@3.3/dl.css">
<script src="https://cdn.jsdelivr.net/gh/Rr210/Lantern@3.3/dl.js"></script>

下载源码

0

评论 (0)

取消