开启辅助访问
切换到宽版

天天ASP家园官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园»论坛 › 技术交流 › 前端技术 › 快春节了，给你的网站添加两个灯笼！
返回列表 发新帖
查看: 258|回复: 0

[文章教程] 快春节了，给你的网站添加两个灯笼！

[复制链接]
xuanxiao 发表于 2024-2-1 11:10:15 | 显示全部楼层 |阅读模式
效果如图： 微信截图_20240201110937.png

  1. <!-- 灯笼1 -->
  2. <div class="deng-box">
  3.         <div class="deng">
  4.                 <div class="xian"></div>
  5.                 <div class="deng-a">
  6.                         <div class="deng-b"><div class="deng-t">节</div></div>
  7.                 </div>
  8.                 <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  9.         </div>
  10. </div>

  12. <!-- 灯笼2 -->
  13. <div class="deng-box1">
  14.         <div class="deng">
  15.                 <div class="xian"></div>
  16.                 <div class="deng-a">
  17.                         <div class="deng-b"><div class="deng-t">春</div></div>
  18.                 </div>
  19.                 <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  20.         </div>
  21. </div>


  24. <style type="text/css">
  25. .deng-box {
  26.         position: fixed;
  27.         top: -40px;
  28.         right: -20px;
  29.         z-index: 999;
  30. }

  32. .deng-box1 {
  33.         position: fixed;
  34.         top: -30px;
  35.         right: 10px;
  36.         z-index: 999;
  37. }

  39. .deng-box1 .deng {
  40.         position: relative;
  41.         width: 120px;
  42.         height: 90px;
  43.         margin: 50px;
  44.         background: #d8000f;
  45.         background: rgba(216, 0, 15, 0.8);
  46.         border-radius: 50% 50%;
  47.         -webkit-transform-origin: 50% -100px;
  48.         -webkit-animation: swing 5s infinite ease-in-out;
  49.         box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  50. }

  52. .deng {
  53.         position: relative;
  54.         width: 120px;
  55.         height: 90px;
  56.         margin: 50px;
  57.         background: #d8000f;
  58.         background: rgba(216, 0, 15, 0.8);
  59.         border-radius: 50% 50%;
  60.         -webkit-transform-origin: 50% -100px;
  61.         -webkit-animation: swing 3s infinite ease-in-out;
  62.         box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  63. }

  65. .deng-a {
  66.         width: 100px;
  67.         height: 90px;
  68.         background: #d8000f;
  69.         background: rgba(216, 0, 15, 0.1);
  70.         margin: 12px 8px 8px 8px;
  71.         border-radius: 50% 50%;
  72.         border: 2px solid #dc8f03;
  73. }

  75. .deng-b {
  76.         width: 45px;
  77.         height: 90px;
  78.         background: #d8000f;
  79.         background: rgba(216, 0, 15, 0.1);
  80.         margin: -4px 8px 8px 26px;
  81.         border-radius: 50% 50%;
  82.         border: 2px solid #dc8f03;
  83. }

  85. .xian {
  86.         position: absolute;
  87.         top: -20px;
  88.         left: 60px;
  89.         width: 2px;
  90.         height: 20px;
  91.         background: #dc8f03;
  92. }

  94. .shui-a {
  95.         position: relative;
  96.         width: 5px;
  97.         height: 20px;
  98.         margin: -5px 0 0 59px;
  99.         -webkit-animation: swing 4s infinite ease-in-out;
  100.         -webkit-transform-origin: 50% -45px;
  101.         background: #ffa500;
  102.         border-radius: 0 0 5px 5px;
  103. }

  105. .shui-b {
  106.         position: absolute;
  107.         top: 14px;
  108.         left: -2px;
  109.         width: 10px;
  110.         height: 10px;
  111.         background: #dc8f03;
  112.         border-radius: 50%;
  113. }

  115. .shui-c {
  116.         position: absolute;
  117.         top: 18px;
  118.         left: -2px;
  119.         width: 10px;
  120.         height: 35px;
  121.         background: #ffa500;
  122.         border-radius: 0 0 0 5px;
  123. }

  125. .deng:before {
  126.         position: absolute;
  127.         top: -7px;
  128.         left: 29px;
  129.         height: 12px;
  130.         width: 60px;
  131.         content: " ";
  132.         display: block;
  133.         z-index: 999;
  134.         border-radius: 5px 5px 0 0;
  135.         border: solid 1px #dc8f03;
  136.         background: #ffa500;
  137.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  138. }

  140. .deng:after {
  141.         position: absolute;
  142.         bottom: -7px;
  143.         left: 10px;
  144.         height: 12px;
  145.         width: 60px;
  146.         content: " ";
  147.         display: block;
  148.         margin-left: 20px;
  149.         border-radius: 0 0 5px 5px;
  150.         border: solid 1px #dc8f03;
  151.         background: #ffa500;
  152.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  153. }

  155. .deng-t {
  156.         font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  157.         font-size: 3.2rem;
  158.         color: #dc8f03;
  159.         font-weight: bold;
  160.         line-height: 85px;
  161.         text-align: center;
  162. }

  164. .night .deng-t,
  165. .night .deng-box,
  166. .night .deng-box1 {
  167.         background: transparent !important;
  168. }

  170. @-moz-keyframes swing {
  171.         0% {
  172.                 -moz-transform: rotate(-10deg)
  173.         }

  175.         50% {
  176.                 -moz-transform: rotate(10deg)
  177.         }

  179.         100% {
  180.                 -moz-transform: rotate(-10deg)
  181.         }
  182. }

  184. @-webkit-keyframes swing {
  185.         0% {
  186.                 -webkit-transform: rotate(-10deg)
  187.         }

  189.         50% {
  190.                 -webkit-transform: rotate(10deg)
  191.         }

  193.         100% {
  194.                 -webkit-transform: rotate(-10deg)
  195.         }
  196. }
  197. </style>
复制代码


ASP币如何冲？请看这里
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号