4.4

(5)

今天，逛奕奕博客，看到他顶部的新年快乐挂件，还挺好看，扒了它，放到自己的网站上。该新年快乐挂件代码由html加纯CSS组成，不含任何js代码。放到自己网站上，以两个灯笼的样子，分别显示新年和快乐，两个词语，大红灯笼看起来还是很喜庆的。

当然，对方通过特殊手段禁止了F12。自然，我也是通过特殊手段打开了F12，扒了他的挂件代码，分享给各位，以供参考。这里，就不细说我是怎么扒下来的了，直接把

Html源码

将以上html源码放于footer.php中，或者你喜欢的任意位置。当然，justnews主题，可以直接在主题设置-插入代码-页脚代码那里添加即可。.deng-box1 {

position: fixed;

top: -30px;

left: 220px;

z-index: 9999;

pointer-events: none;

}

.deng {

position: relative;

width: 120px;

height: 90px;

margin: 50px;

background: #d8000f;

background: rgba(216, 0, 15, 0.8);

border-radius: 50% 50%;

-webkit-transform-origin: 50% -100px;

-webkit-animation: swing 3s infinite ease-in-out;

box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);

}

.deng::before {

position: absolute;

top: -7px;

left: 29px;

height: 12px;

width: 60px;

content: " ";

display: block;

z-index: 999;

border-radius: 5px 5px 0 0;

border: solid 1px #dc8f03;

background: #ffa500;

background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);

}

.xian {

position: absolute;

top: -20px;

left: 60px;

width: 2px;

height: 20px;

background: #dc8f03;

}

.deng-box1 {

pointer-events: none;

}

.deng-a {

width: 100px;

height: 90px;

background: #d8000f;

background: rgba(216, 0, 15, 0.1);

margin: 12px 8px 8px 10px;

border-radius: 50% 50%;

border: 2px solid #dc8f03;

}

.deng-b {

width: 45px;

height: 90px;

background: #d8000f;

background: rgba(216, 0, 15, 0.1);

margin: -2px 8px 8px 26px;

border-radius: 50% 50%;

border: 2px solid #dc8f03;

}

.deng-t {

font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;

font-size: 1.5rem;

color: #ffa500;

font-weight: bold;

line-height: 42px;

text-align: center;

width: 25px;

margin: 0 auto;

}

.shui-a {

position: relative;

width: 5px;

height: 20px;

margin: -5px 0 0 59px;

-webkit-animation: swing 4s infinite ease-in-out;

-webkit-transform-origin: 50% -45px;

background: #ffa500;

border-radius: 0 0 5px 5px;

}

.shui-c {

position: absolute;

top: 18px;

left: -2px;

width: 10px;

height: 35px;

background: #ffa500;

border-radius: 0 0 0 5px;

}

.shui-b {

position: absolute;

top: 14px;

left: -2px;

width: 10px;

height: 10px;

background: #dc8f03;

border-radius: 50%;

}

.deng::after {

position: absolute;

bottom: -7px;

left: 10px;

height: 12px;

width: 60px;

content: " ";

display: block;

margin-left: 20px;

border-radius: 0 0 5px 5px;

border: solid 1px #dc8f03;

background: #ffa500;

background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);

}

.deng-box2 {

position: fixed;

top: -30px;

right: 222px;

z-index: 9999;

pointer-events: none;

}

.deng-box2 .deng {

position: relative;

width: 120px;

height: 90px;

margin: 50px;

background: #d8000f;

background: rgba(216, 0, 15, 0.8);

border-radius: 50% 50%;

-webkit-transform-origin: 50% -100px;

-webkit-animation: swing 5s infinite ease-in-out;

box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);

}

.deng-box2 {

pointer-events: none;

}

@-moz-keyframes swing {

0% {

-moz-transform: rotate(-10deg)

}

50% {

-moz-transform: rotate(10deg)

}

100% {

-moz-transform: rotate(-10deg)

}

}

@-webkit-keyframes swing {

0% {

-webkit-transform: rotate(-10deg)

}

50% {

-webkit-transform: rotate(10deg)

}

100% {

-webkit-transform: rotate(-10deg)

}

}

最后，再加入如上CSS代码即可，你可以将以上CSS源码放于style.css文件中，也可以放于主题设置，自定义css中。网站挂好新年快乐挂件后，样子如下图所示：

最后，如果手机端不想显示，可以加入如下代码：@media (max-width: 900px){.deng-box1{display:none;}}

@media (max-width: 900px){.deng-box2{display:none;}}

提交评分

共计5人评分，平均4.4分

到目前为止还没有投票~

很抱歉，这篇文章对您没有用！

让我们改善这篇文章！

告诉我们我们如何改善这篇文章？提交反馈

原创文章，作者：古哥，转载需经过作者授权同意，并附上原文链接：https://iymark.com/website/wordpress-happy-newyear.html