首页 > 其他分享 >四字灯笼--欢度新春

四字灯笼--欢度新春

时间:2022-12-30 17:44:54浏览次数:51  
标签:欢度 dc8f03 5px -- 50% width background 新春 deng

第一种:添加js代码,两个灯笼!

 

 

<script src="https://www.asessin.com/js/dl.js" type="text/javascript"></script>

 

 

把这段代码添加到网站<head>之间即可</head>

 

 

第二种方法:添加HTML代码,四个灯笼!

 

 

第一步:

 

 

  1. <div id="wp"class="wp"><div class="xnkl"><div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">度</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">欢</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">春</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div></div>

 

 

第二步:

 

  <style type="text/css"> .ct2 .mn {width:770px;} .ct2 .sd {width:218px;} @media screen and (max-width:768px) {.xnkl {display:none;} } .deng-box {position:fixed;top:-40px;right:150px;z-index:9999;pointer-events:none;} .deng-box1 {position:fixed;top:-30px;right:10px;z-index:9999;pointer-events:none} .deng-box2 {position:fixed;top:-40px;left:150px;z-index:9999;pointer-events:none} .deng-box3 {position:fixed;top:-30px;left:10px;z-index:9999;pointer-events:none} .deng-box1 .deng,.deng-box3 .deng {position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px #fc903d} .deng {position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px #fa6c00} .deng-a {width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:12px 8px 8px 8px;border-radius:50% 50%;border:2px solid #dc8f03} .deng-b {width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:-4px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03} .xian {position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03} .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:orange;border-radius:0 0 5px 5px} .shui-b {position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%} .shui-c {position:absolute;top:18px;left:-2px;width:10px;height:35px;background:orange;border-radius:0 0 0 5px} .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:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .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:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng-t {font-family:黑体,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center} .night .deng-box,.night .deng-box1,.night .deng-t {background:0 0!important} @-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)} </style>

  • 如果只想在首页显示灯笼,可以用下面的判断把HTML代码包裹起来:

 

 

<?php if (is_home()) { ?><!-- 把这行用上面的灯笼代码替换 --><?php } ?>

 

 

第二种重要说明:

 

 

1、在有的主题上,如果灯笼上的文字字号有点大,可以适当修改CSS样式第133行的字号:font-size: 3.2rem;

 

 

2、有的主题登录和注册按钮在右侧,可以修改CSS样式第4行的right: -20px;为left:10px,第11行的right: 10px;为left-20px。

 

 

3、也可以一边挂一个灯笼,只需要把CSS样式中的第11行的right: 10px;修改为left:-20px即可。

 

 

参考网址: https://baijiahao.baidu.com/s?id=1721492729571295968&wfr=spider&for=pc

标签:欢度,dc8f03,5px,--,50%,width,background,新春,deng
From: https://www.cnblogs.com/abcdefghi123/p/17015472.html

相关文章

  • 开源工作流系统是什么?
    随着数字化时代的到来,开源工作流系统在现代化办公系统中发挥了重要的应用价值,可以说是帮助企业提升办公协作效率的的得力系统之一。那么,什么是开源工作流系统?它的特点又有......
  • k8s图形化生成yaml
    目录创建ratel的配置文件创建RBAC部署ratel创建service后续操作使用Ratel创建DeploymentVolume配置Container配置Container1配置Container2配置InitContainer配置Servic......
  • Shiro-721
    借用p师傅的环境,改成了shiro1.4.1root/secretApapcheShiroRememberMeCookie默认通过AES-128-CBC模式加密,这种加密模式容易受到PaddingOracleAttack(Orac......
  • 大白话5分钟带你走进人工智能-第38节神经网络之TensorFlow利用梯度下降法求解最优解(6
    先看一个传统方法手动实现线性回归和MSE损失函数的方案:importtensorflowastfimportnumpyasnpfromsklearn.datasetsimportfetch_california_housingfromsklearn.pr......
  • 【Kafka专栏】-Kafka从初始到搭建到应用
    =========================================================声明:由于不同平台阅读格式不一致(尤其源码部分),所以获取更多阅读体验!!个人网站地址:​​http://www.lhworldblog.......
  • 【Storm篇】--Storm从初始到分布式搭建
    =========================================================声明:由于不同平台阅读格式不一致(尤其源码部分),所以获取更多阅读体验!!个人网站地址:​​http://www.lhworldblog.......
  • 大白话5分钟带你走进人工智能-第十五节L1和L2正则几何解释和Ridge,Lasso,Elastic Net回
                                        第十五节L1和L2正则几何解释和Ridge,Lasso,ElasticNet回归上一节中我们讲解了L1和L2正则的概念......
  • Hadoop源码篇--Reduce篇
    声明~由于不同博客平台代码阅读样式不一样,所以欢迎访问本人博客园地址:​​Hadoop源码篇--Reduce篇​​​​个人网页博客地址:​​​​Hadoop源码篇--Reduce篇​​ ​​带给......
  • C
     如何安装VsualStudio: (1)安装包下载路径:https://visualstudio.microsoft.com/zh-hans/downloads/ (2)安装指导路径:https://blog.csdn.net/bxy0806/article/det......
  • FTP搭建YUM源
    一、需求背景    在一些涉密单位,为了更好的维护好内网环境,虚拟机一般都是禁止上外网的,并且接外设必须是客户自己的或者必我们的也必须现场认证一下,windows的话可以......