春联

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
* {  
  margin: 0px auto;  
  padding: 0px;  
  font-family: '隶书';  
  font-size: 2rem;  
  border-radius: 12px;  
}  

.content {  
  width: 90%;  
}  

.left {  
  text-align: center;  
  float: left;  
}  

.right {  
  text-align: center;  
  float: right;  
}  

.left,  
.right {  
  margin-top: 2rem;  
  width: 2rem;  
  height: 70%;  
  background-color: red;  
  background-image: url("https://i-blog.csdnimg.cn/blog_migrate/2afb66aac6671fcb44689be98f2834dd.png");  
  background-size: 100%;  
  background-repeat: repeat-y;  
  line-height: 100px;  
}  

1
2
3
4
5
#app  
  .content  
    .left 梧桐树上凤呈祥  
    .right 世纪门前蛇起舞  
div(style="clear: both;")

前面的css肯定会影响别的块元素，所以要改一下名字避免重复，直接放我修改后的最终版吧。

修改版

但是还是效果不太好，电脑上显示还算可以，如果换成手机估计会被博客内容遮挡。

一会试试改成js脚本，不然太乱了，要改一堆东西，过完年想改回来都费劲。

1
2
3
4
5
#app  
  .duiliancontent  
    .duilianleft 梧桐树上凤呈祥  
    .duilianright 世纪门前蛇起舞  
div(style="clear: both;")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.duiliancontent {  
  width: 90%;  
  margin: 0 auto;  
  padding: 0;  
  font-family: '隶书';  
  font-size: 2rem;  
  position: relative; /* 相对定位使其他元素受影响较小 */  
}  

.duilianleft,  
.duilianright {  
  text-align: center;  
  width: 3rem;  
  height: 70%;  
  background-color: red;  
  background-image: url("https://i-blog.csdnimg.cn/blog_migrate/2afb66aac6671fcb44689be98f2834dd.png");  
  background-size: 100%;  
  background-repeat: repeat-y;  
  line-height: 100px;  
  font-family: '隶书';  
  font-size: 2rem;  
  border-radius: 12px;  
  position: fixed; /* 使左右两侧的春联浮动 */  
  margin-top: 2rem; /* 上边距确保不挡住其他内容 */  
}  

.duilianleft {  
  left: 10px; /* 定位左边的春联 */  
}  

.duilianright {  
  right: 10px; /* 定位右边的春联 */  
}

偶对了，pug是添加到layout里面的文件夹里了，css是source文件夹里的css文件夹里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// 创建并添加样式  
const style = document.createElement('style');  
style.textContent = `  
  .duiliancontent {  
    width: 90%;  
    margin: 0 auto;  
    padding: 0;  
    font-family: '隶书';  
    font-size: 2rem;  
    position: relative;   
  }  

  .duilianleft,  
  .duilianright {  
    text-align: center;  
    width: 3rem;  
    height: 70%;  
    background-color: red;  
    background-image: url("https://i-blog.csdnimg.cn/blog_migrate/2afb66aac6671fcb44689be98f2834dd.png");  
    background-size: 100%;  
    background-repeat: repeat-y;  
    line-height: 100px;  
    font-family: '隶书';  
    font-size: 2rem;  
    border-radius: 12px;  
    position: fixed;  
    margin-top: 2rem;  
  }  

  .duilianleft {  
    left: 10px;  
  }  

  .duilianright {  
    right: 10px;  
  }  
`;  
document.head.appendChild(style);  

// 创建并添加内容  
const appDiv = document.createElement('div');  
appDiv.id = 'app';  

const dualianContent = document.createElement('div');  
dualianContent.className = 'duiliancontent';  

const dualianLeft = document.createElement('div');  
dualianLeft.className = 'duilianleft';  
dualianLeft.textContent = '梧桐树上凤呈祥';  

const dualianRight = document.createElement('div');  
dualianRight.className = 'duilianright';  
dualianRight.textContent = '世纪门前蛇起舞';  

// 将左右春联添加到内容中  
dualianContent.appendChild(dualianLeft);  
dualianContent.appendChild(dualianRight);  

// 添加到应用的主容器中  
appDiv.appendChild(dualianContent);  

// 创建一个清除浮动的 div  
const clearDiv = document.createElement('div');  
clearDiv.style.clear = 'both';  
appDiv.appendChild(clearDiv);  

// 将整个内容添加到 body 中  
document.body.appendChild(appDiv);

明天继续吧，good night了。

发现了一些有趣的文章：Hexo博客添加自定义css和js文件 | Leonus

用gpt改了一下，好看一点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
function addDuilian() {  
    // 创建并添加样式  
    const style = document.createElement('style');  
    style.textContent = `  
      .duiliancontent {  
        width: 90%;  
        margin: 0 auto;  
        padding: 0;  
        font-family: '隶书';  
        font-size: 2rem;  
        position: relative;   
      }  

      .duilianleft,  
      .duilianright {  
        text-align: center;  
        width: 3rem;  
        height: 70%;  
        background-color: red;  
        background-image: url("https://i-blog.csdnimg.cn/blog_migrate/2afb66aac6671fcb44689be98f2834dd.png");  
        background-size: 100%;  
        background-repeat: repeat-y;  
        line-height: 100px;  
        font-family: '隶书';  
        font-size: 2rem;  
        border-radius: 12px;  
        position: fixed;  
        margin-top: 2rem;  
      }  

      .duilianleft {  
        left: 10px;  
      }  

      .duilianright {  
        right: 10px;  
      }  
    `;  
    document.head.appendChild(style);  

    // 创建并添加内容  
    const appDiv = document.createElement('div');  
    appDiv.id = 'app';  

    const dualianContent = document.createElement('div');  
    dualianContent.className = 'duiliancontent';  

    const dualianLeft = document.createElement('div');  
    dualianLeft.className = 'duilianleft';  
    dualianLeft.textContent = '梧桐树上凤呈祥';  

    const dualianRight = document.createElement('div');  
    dualianRight.className = 'duilianright';  
    dualianRight.textContent = '世纪门前蛇起舞';  

    // 将左右春联添加到内容中  
    dualianContent.appendChild(dualianLeft);  
    dualianContent.appendChild(dualianRight);  

    // 添加到应用的主容器中  
    appDiv.appendChild(dualianContent);  

    // 创建一个清除浮动的 div  
    const clearDiv = document.createElement('div');  
    clearDiv.style.clear = 'both';  
    appDiv.appendChild(clearDiv);  

    // 将整个内容添加到 body 中  
    document.body.appendChild(appDiv);  
}  

// 在页面加载后调用函数  
window.onload = addDuilian;

还嘚再改改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
(function() {  
    "use strict";  
    
    // 创建样式  
    const style = document.createElement('style');  
    style.type = 'text/css';  
    style.textContent = `  
        @charset "UTF-8";  
        .duilian__wrapper {  
            position: fixed;  
            top: 20px;  
            left: 20px;  
            z-index: 999;  
        }  
        .duilian__box {  
            position: relative;  
            display: inline-block;  
			width: 3rem;  
            background: rgba(216, 0, 15, .8);  
            border-radius: 12px;  
            // animation: swing 3s ease-in-out infinite alternate-reverse;  
            box-shadow: -5px 5px 50px 4px #fa6c00;  
        }  
        .duilian__text {  
            font-family: '隶书', sans-serif;  
            font-size: 2rem;  
            color: #dc8f03;  
            line-height: 70px;  
            text-align: center;  
        }  
        // @keyframes swing {  
        //     0% { transform: rotate(-8deg); }  
        //     100% { transform: rotate(8deg); }  
        // }  
    `;  
    document.head.appendChild(style);  

    // 创建内容  
    const wrapper = document.createElement('div');  
    wrapper.className = 'duilian__wrapper';  

    const leftBox = document.createElement('div');  
    leftBox.className = 'duilian__box';  
    leftBox.innerHTML = '<div class="duilian__text">梧桐树上凤呈祥</div>';  

    const rightBox = document.createElement('div');  
    rightBox.className = 'duilian__box';  
    rightBox.innerHTML = '<div class="duilian__text">世纪门前蛇起舞</div>';  

    // 将左右春联添加到容器中  
    wrapper.appendChild(leftBox);  
    wrapper.appendChild(rightBox);  

    // 将整个内容添加到 body 中  
    document.body.appendChild(wrapper);  
})();

但是上面这段代码左右对联都堆在了左边。

Flexbox 布局：通过将 duilian__wrapper 的 CSS display 设置为 flex，并使用 justify-content: space-between，我们可以将左侧和右侧对联分别固定在左右两端。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
(function() {  
    "use strict";  
    
    // 创建样式  
    const style = document.createElement('style');  
    style.type = 'text/css';  
    style.textContent = `  
        @charset "UTF-8";  
        .duilian__wrapper {  
            position: fixed;  
            top: 20px;  
            left: 10px;  
            right: 10px;  
            z-index: 999;  
            display: flex;  
            justify-content: space-between;  
        }  
        .duilian__box {  
            position: relative;  
            display: inline-block;  
            width: 3rem;  
            background: rgba(216, 0, 15, .8);  
            border-radius: 12px;  
            box-shadow: -5px 5px 50px 4px #fa6c00;  
        }  
        .duilian__text {  
            font-family: '隶书', sans-serif;  
            font-size: 2rem;  
            color: #dc8f03;  
            line-height: 70px;  
            text-align: center;  
        }  
    `;  
    document.head.appendChild(style);  

    // 创建内容  
    const wrapper = document.createElement('div');  
    wrapper.className = 'duilian__wrapper';  

    const leftBox = document.createElement('div');  
    leftBox.className = 'duilian__box';  
    leftBox.innerHTML = '<div class="duilian__text">梧桐树上凤呈祥</div>';  

    const rightBox = document.createElement('div');  
    rightBox.className = 'duilian__box';  
    rightBox.innerHTML = '<div class="duilian__text">世纪门前蛇起舞</div>';  

    // 将左右春联添加到容器中  
    wrapper.appendChild(leftBox);  
    wrapper.appendChild(rightBox);  

    // 将整个内容添加到 body 中  
    document.body.appendChild(wrapper);  
})();

突然意识到可以通过调节z-index把元素显示出来！！！那之前没显示出来的原因很有可能是原本就有的很多元素把我的对联给挡住了！！！也就是说，只要把z-index设到最大，之前所有的代码就会显示出来！！哭力。。。难怪好使的代码加进去就没有效果。。

1
2
top: 50%;  
transform: translateY(-50%);

改了css，微调位置竖直居中，比较好看。

修改版2.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
(function() {  
    "use strict";  
    
    // 创建样式  
    const style = document.createElement('style');  
    style.type = 'text/css';  
    style.textContent = `  
        @charset "UTF-8";  
        .duilian__wrapper {  
            position: fixed;  
            top: 50%;  
			transform: translateY(-50%);
            left: 10px;  
            right: 10px;  
            z-index: 999;  
            display: flex;  
            justify-content: space-between;  
        }  
        .duilian__box {  
            position: relative;  
            display: inline-block;  
            width: 3rem;  
            background: rgba(216, 0, 15, .8);  
            border-radius: 12px;  
            box-shadow: -5px 5px 50px 4px #fa6c00;  
        }  
        .duilian__text {  
            font-family: '隶书', sans-serif;  
            font-size: 2rem;  
            color: #dc8f03;  
            line-height: 70px;  
            text-align: center;  
        }  
    `;  
    document.head.appendChild(style);  

    // 创建内容  
    const wrapper = document.createElement('div');  
    wrapper.className = 'duilian__wrapper';  

    const leftBox = document.createElement('div');  
    leftBox.className = 'duilian__box';  
    leftBox.innerHTML = '<div class="duilian__text">梧桐树上凤呈祥</div>';  

    const rightBox = document.createElement('div');  
    rightBox.className = 'duilian__box';  
    rightBox.innerHTML = '<div class="duilian__text">世纪门前蛇起舞</div>';  

    // 将左右春联添加到容器中  
    wrapper.appendChild(leftBox);  
    wrapper.appendChild(rightBox);  

    // 将整个内容添加到 body 中  
    document.body.appendChild(wrapper);  
})();

完成撒花！！！

没完结。。。

被春联占的地方，一整行点不了，大半屏幕点不了。

查了解决方案，选了为春联添加点击穿透的方法。

1
pointer-events: none;  // 添加点击穿透

ai的解决方案

你提到的“春联那一行的按钮都点不了”的问题，可能是因为春联的样式覆盖了页面上的其他元素，导致这些元素无法被点击。具体来说，春联的 position: fixed; 属性使其固定在页面上，并且 z-index: 999; 使其位于页面的最上层，可能会遮挡其他元素。

要解决这个问题，你可以尝试以下几种方法：

方法1：调整春联的 z-index

如果你希望春联不遮挡其他元素，可以将春联的 z-index 设置为一个较低的值，确保它不会覆盖页面上的其他内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const style = document.createElement('style');  
style.type = 'text/css';  
style.textContent = `  
    @charset "UTF-8";  
    .duilian__wrapper {  
        position: fixed;  
        top: 50%;  
        transform: translateY(-50%);  
        left: 10px;  
        right: 10px;  
        z-index: 1;  // 降低 z-index 值
        display: flex;  
        justify-content: space-between;  
    }  
    .duilian__box {  
        position: relative;  
        display: inline-block;  
        width: 3rem;  
        background: rgba(216, 0, 15, .8);  
        border-radius: 12px;  
        box-shadow: -5px 5px 50px 4px #fa6c00;  
    }  
    .duilian__text {  
        font-family: '隶书', sans-serif;  
        font-size: 2rem;  
        color: #dc8f03;  
        line-height: 70px;  
        text-align: center;  
    }  
`;  
document.head.appendChild(style);

方法2：调整春联的位置

如果你不希望春联遮挡页面上的其他元素，可以将春联放置在页面的边缘，或者调整其大小和位置，使其不会覆盖页面上的重要内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const style = document.createElement('style');  
style.type = 'text/css';  
style.textContent = `  
    @charset "UTF-8";  
    .duilian__wrapper {  
        position: fixed;  
        top: 10px;  // 将春联放置在页面顶部
        left: 10px;  
        right: 10px;  
        z-index: 999;  
        display: flex;  
        justify-content: space-between;  
    }  
    .duilian__box {  
        position: relative;  
        display: inline-block;  
        width: 3rem;  
        background: rgba(216, 0, 15, .8);  
        border-radius: 12px;  
        box-shadow: -5px 5px 50px 4px #fa6c00;  
    }  
    .duilian__text {  
        font-family: '隶书', sans-serif;  
        font-size: 2rem;  
        color: #dc8f03;  
        line-height: 70px;  
        text-align: center;  
    }  
`;  
document.head.appendChild(style);

方法3：为春联添加点击穿透

如果你希望春联不干扰页面上的其他元素的点击事件，可以为春联添加 pointer-events: none; 样式，这样点击事件会穿透春联，触发下方的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const style = document.createElement('style');  
style.type = 'text/css';  
style.textContent = `  
    @charset "UTF-8";  
    .duilian__wrapper {  
        position: fixed;  
        top: 50%;  
        transform: translateY(-50%);  
        left: 10px;  
        right: 10px;  
        z-index: 999;  
        display: flex;  
        justify-content: space-between;  
        pointer-events: none;  // 添加点击穿透
    }  
    .duilian__box {  
        position: relative;  
        display: inline-block;  
        width: 3rem;  
        background: rgba(216, 0, 15, .8);  
        border-radius: 12px;  
        box-shadow: -5px 5px 50px 4px #fa6c00;  
        pointer-events: auto;  // 允许春联本身可以点击
    }  
    .duilian__text {  
        font-family: '隶书', sans-serif;  
        font-size: 2rem;  
        color: #dc8f03;  
        line-height: 70px;  
        text-align: center;  
    }  
`;  
document.head.appendChild(style);

方法4：动态调整春联的显示

如果你希望在某些情况下隐藏春联，可以通过 JavaScript 动态控制春联的显示和隐藏。例如，当用户点击某个按钮时，隐藏春联。

1
2
3
4
5
6
7
8
9
10
11
12
// 添加一个按钮来控制春联的显示和隐藏
const toggleButton = document.createElement('button');
toggleButton.textContent = 'Toggle 春联';
toggleButton.style.position = 'fixed';
toggleButton.style.top = '10px';
toggleButton.style.right = '10px';
toggleButton.style.zIndex = '1000';
document.body.appendChild(toggleButton);

toggleButton.addEventListener('click', () => {
    wrapper.style.display = wrapper.style.display === 'none' ? 'flex' : 'none';
});

通过以上方法，你可以解决春联遮挡页面元素导致无法点击的问题。根据你的具体需求选择合适的方法即可。

最终版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
(function() {  
    "use strict";  
    
    // 创建样式  
    const style = document.createElement('style');  
    style.type = 'text/css';  
    style.textContent = `  
        @charset "UTF-8";  
        .duilian__wrapper {  
            position: fixed;  
            top: 50%;  
			transform: translateY(-50%);
            left: 10px;  
            right: 10px;  
            z-index: 999;  
            display: flex;  
            justify-content: space-between;
			pointer-events: none;  // 添加点击穿透
        }  
        .duilian__box {  
            position: relative;  
            display: inline-block;  
            width: 3rem;  
            background: rgba(216, 0, 15, .8);  
            border-radius: 12px;  
            box-shadow: -5px 5px 50px 4px #fa6c00;  
			pointer-events: none;  // 添加点击穿透
        }  
        .duilian__text {  
            font-family: '隶书', sans-serif;  
            font-size: 2rem;  
            color: #dc8f03;  
            line-height: 70px;  
            text-align: center;  
        }  
    `;  
    document.head.appendChild(style);  

    // 创建内容  
    const wrapper = document.createElement('div');  
    wrapper.className = 'duilian__wrapper';  

    const leftBox = document.createElement('div');  
    leftBox.className = 'duilian__box';  
    leftBox.innerHTML = '<div class="duilian__text">梧桐树上凤呈祥</div>';  

    const rightBox = document.createElement('div');  
    rightBox.className = 'duilian__box';  
    rightBox.innerHTML = '<div class="duilian__text">世纪门前蛇起舞</div>';  

    // 将左右春联添加到容器中  
    wrapper.appendChild(leftBox);  
    wrapper.appendChild(rightBox);  

    // 将整个内容添加到 body 中  
    document.body.appendChild(wrapper);  
})();

灯笼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*!
 * china-lantern v1.1.0
 * (c) 2020-2021 fz6m
 * Released under the MIT License.
 */
! function(t) {
	"function" == typeof define && define.amd ? define(t) : t()
}((function() {
	"use strict";
	! function(t, e) {
		void 0 === e && (e = {});
		var n = e.insertAt;
		if (t && "undefined" != typeof document) {
			var r = document.head || document.getElementsByTagName("head")[0],
				a = document.createElement("style");
			a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(
				a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t))
		}
	}(
		'@charset "UTF-8";.lantern__warpper{position:fixed;top:12px;left:40px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:999}.lantern__warpper.lantern__secondary{left:calc(100% - 130px)}.lantern__warpper.lantern__secondary .lantern__box{-webkit-animation-duration:3s;animation-duration:3s}.lantern__box{position:relative;display:inline-block;width:90px;height:70px;background:rgba(216,0,15,.8);border-radius:50% 50%;animation:lantern-swing 3s ease-in-out infinite alternate-reverse;-webkit-transform-origin:50% -70px;-ms-transform-origin:50% -70px;transform-origin:50% -70px;-webkit-box-shadow:-5px 5px 50px 4px #fa6c00;box-shadow:-5px 5px 50px 4px #fa6c00}.lantern__box:after,.lantern__box:before{content:"";position:absolute;height:8px;width:45px;left:50%;border:1px solid #dc8f03;background:-webkit-gradient(linear,left top,right top,from(#dc8f03),color-stop(orange),color-stop(#dc8f03),color-stop(orange),to(#dc8f03));background:-o-linear-gradient(left,#dc8f03,orange,#dc8f03,orange,#dc8f03);background:linear-gradient(90deg,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.lantern__box:before{top:0;border-radius:5px 5px 0 0;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.lantern__box:after{bottom:0;border-radius:0 0 5px 5px;-webkit-transform:translate(-50%,50%);-ms-transform:translate(-50%,50%);transform:translate(-50%,50%)}.lantern__line{position:absolute;width:2px;height:12px;top:0;left:50%;-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);background:#dc8f03}.lantern__circle{width:80%;-webkit-box-sizing:border-box;box-sizing:border-box}.lantern__circle,.lantern__circle .lantern__ellipse{height:100%;margin:0 auto;border-radius:50%;border:2px solid #dc8f03}.lantern__circle .lantern__ellipse{width:50%}.lantern__circle .lantern__text{font-family:华文行楷,Microsoft YaHei,sans-serif;font-size:24.3px;color:#dc8f03;font-weight:700;line-height:66px;text-align:center}.lantern__tail{position:relative;width:4px;height:12px;margin:0 auto;animation:lantern-swing 4s ease-in-out infinite alternate-reverse;background:orange;border-radius:0 0 5px 5px}.lantern__tail .lantern__junction{position:absolute;top:0;left:50%;width:8px;height:8px;-webkit-transform:translate(-50%,8.4px);-ms-transform:translate(-50%,8.4px);transform:translate(-50%,8.4px);background:#e69603;border-radius:50%}.lantern__tail .lantern__rect{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%,10.8px);-ms-transform:translate(-50%,10.8px);transform:translate(-50%,10.8px);width:8px;height:24px;background:orange;border-radius:5px 5px 0 5px}@-webkit-keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@media (max-width:460px){.lantern__warpper{top:8px;left:30px}.lantern__warpper.lantern__secondary{left:calc(100% - 80px)}.lantern__box{width:50px;height:40px;-webkit-transform-origin:50% -40px;-ms-transform-origin:50% -40px;transform-origin:50% -40px;-webkit-box-shadow:-5px 5px 50px -1px #fa6c00;box-shadow:-5px 5px 50px -1px #fa6c00}.lantern__box:after,.lantern__box:before{height:4px;width:25px}.lantern__line{width:2px;height:8px}.lantern__circle .lantern__text{font-size:13.5px;line-height:38px}.lantern__tail{width:4px;height:8px}.lantern__tail .lantern__junction{width:8px;height:8px;-webkit-transform:translate(-50%,5.6px);-ms-transform:translate(-50%,5.6px);transform:translate(-50%,5.6px)}.lantern__tail .lantern__rect{-webkit-transform:translate(-50%,7.2px);-ms-transform:translate(-50%,7.2px);transform:translate(-50%,7.2px);width:8px;height:16px}}');
	var t;
	(t = document.createElement("div")).className = "j-china-lantern", t.innerHTML =
		'<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">新</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">年</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>',
		document.body.appendChild(t)
}));