设为首页收藏本站
切换到宽版

Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › Discuz! 交流与讨论 › 站长帮 › 有谁会看代码
返回列表 发新帖

[新需求] 有谁会看代码

[复制链接]
cao1987 发表于 2020-9-28 22:43:53 | 显示全部楼层 |阅读模式
需求发布
金额范围: 10-50 元
预算金额: 50 元
开始时间:
结束时间:
联系方式: 隐藏内容
  1. <head>4 \/ V" M& N5 R
  2. <style>
    3 _) m: d2 {) L2 b& \8 w1 y2 s, o/ v
  3. .deng-box {# y! W$ T( F2 Q3 f- w/ d
  4.         position: fixed;
    8 ^' }# a& K5 C; L6 ^" [6 h
  5.         top: -40px;
    ! E7 Y$ H" N  V8 r7 h, i3 y
  6.         right: -20px;
    & j7 k0 c% z$ V4 `' ~& O
  7.         z-index: 999;
    , ^1 m/ T9 I3 [
  8. }
    6 q* h" U7 D- l" K* A) v4 L+ e1 F
  9. , m: L5 r8 x! {2 B( I
  10. .deng-box1 {/ [4 m7 F* D. g/ A& S+ Q4 O
  11.         position: fixed;
    # f* P+ T* ~6 j4 O
  12.         top: -30px;5 ]4 r( S! j# o$ L' @2 E
  13.         right: 10px;
    4 M$ B0 `2 q5 i; B$ k* |
  14.         z-index: 999;/ z9 l- p5 X$ m
  15. }
    1 q8 }' m! I3 X) b2 @0 l  T3 Q

  16. ! r8 s- b! x8 B$ m' B
  17. .deng-box1 .deng {
    ) t9 `1 v3 h0 P4 O4 N; l6 X
  18.         position: relative;8 L- m5 Z+ f0 J4 R! w" n7 U3 M
  19.         width: 120px;
    7 O5 b( w( Y4 ^& l) {
  20.         height: 90px;) Z4 R8 H7 T+ k- {
  21.         margin: 50px;
      N5 ~, _  O* \0 o0 I+ w
  22.         background: #d8000f;( l, F: o) C4 E: E, g
  23.         background: rgba(216, 0, 15, 0.8);
    . ^2 }/ W$ F; X5 ^8 n
  24.         border-radius: 50% 50%;
    1 n' N, }4 s1 ?/ t( _2 U
  25.         -webkit-transform-origin: 50% -100px;
    & {  s# a$ u: |7 I
  26.         -webkit-animation: swing 5s infinite ease-in-out;6 `$ V6 S" s8 c1 N9 B6 t8 M; E7 j, q
  27.         box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
    ; T4 w: p( w9 f% K! \# z3 e
  28. }
    3 s  g  G* w( u
  29. ' a+ {: a8 I, W  |, x) O( A
  30. .deng {6 r, M4 d" m5 d+ C2 Y
  31.         position: relative;* s- v7 ^$ F1 o7 h5 o) ^
  32.         width: 120px;7 ~1 [% w; y" z8 M2 g
  33.         height: 90px;
    ( p( a9 F. [$ ^" F5 M' S
  34.         margin: 50px;
    2 O  D* i1 w8 S3 W7 J
  35.         background: #d8000f;
    , Q+ k- m$ `! D4 B3 b. k" U
  36.         background: rgba(216, 0, 15, 0.8);* H) ?& ~, b5 J; h, f9 L  }
  37.         border-radius: 50% 50%;7 j/ @+ a$ S( r- O) L
  38.         -webkit-transform-origin: 50% -100px;
    & @( x+ L; u5 F* @
  39.         -webkit-animation: swing 3s infinite ease-in-out;( S9 Q1 \$ f/ H0 U
  40.         box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);9 j( g8 w1 y; w- m4 z
  41. }
    ! g! x8 ?; I" E8 @, O
  42. ; u% [) I- j: f5 y
  43. .deng-a {
    * {% u6 S: r, p( |8 @
  44.         width: 100px;2 d7 l+ W" R  J* x2 e& f1 ^
  45.         height: 90px;9 Z" v/ f  J; O4 k. A
  46.         background: #d8000f;
    - F$ G$ \) l( B1 v
  47.         background: rgba(216, 0, 15, 0.1);
    $ d( z; k1 q# ]1 w: o* P+ f1 N0 P/ M
  48.         margin: 12px 8px 8px 8px;$ B! e  T/ j' p; b) o. g6 h! {
  49.         border-radius: 50% 50%;
    ' T( J- T( I! ~/ \% I
  50.         border: 2px solid #dc8f03;2 h) T4 N. L8 {2 O
  51. }
    : Y) Z  K) m! s
  52. , y) @3 n( ]4 p4 K; S" k
  53. .deng-b {
    ! e" q  K5 H: {9 ], c
  54.         width: 45px;
    8 S7 M: }$ q/ A4 C: W
  55.         height: 90px;
    " q/ E) G2 z0 J0 j
  56.         background: #d8000f;2 {' K+ }6 _# ?. m; X
  57.         background: rgba(216, 0, 15, 0.1);
    9 P: `5 c9 u. D9 b3 w, Z' M
  58.         margin: -4px 8px 8px 26px;8 i, C0 d% r% f4 b
  59.         border-radius: 50% 50%;, Y) D5 T) o  n' o6 X8 ~# _
  60.         border: 2px solid #dc8f03;1 S+ r  j7 v1 T5 Q! {7 x7 ]
  61. }
    " ]8 b6 {8 F+ k( X

  62. 2 i8 Z/ D# E) i7 L( G& z# |
  63. .xian {# F- {2 e$ ]. a* {
  64.         position: absolute;1 i3 _1 i  T( w, R( k* t
  65.         top: -20px;
    # `4 g+ Y& ?; y- M
  66.         left: 60px;( {+ J) x1 p% a
  67.         width: 2px;1 O0 c: m0 r/ @  |% ]3 g
  68.         height: 20px;4 e+ \2 s* \; `# a( v- s
  69.         background: #dc8f03;) [! k) U# u  s4 i) g9 E
  70. }
    / H4 f% z! R( L$ q0 m

  71. * _- t) B; o" k" R! X4 p6 h
  72. .shui-a {) Y0 B' K0 V+ ^0 x& t3 u+ v" ^
  73.         position: relative;- Z) w7 n+ d( x0 H5 f1 U
  74.         width: 5px;
    : Z0 Y0 |/ s; F' U3 {5 R, k
  75.         height: 20px;( [) [; `# b- T
  76.         margin: -5px 0 0 59px;
    7 e* y" a7 {( r: L! `  f
  77.         -webkit-animation: swing 4s infinite ease-in-out;0 L3 r; h8 ?4 J- [) K
  78.         -webkit-transform-origin: 50% -45px;2 D; t1 K) E; D4 J# f- A
  79.         background: #ffa500;
    + i  O! ?% ~( F; {. ~; T( `5 k
  80.         border-radius: 0 0 5px 5px;0 Z! [8 `* C& y. `. k
  81. }
    5 N/ r+ ]6 }. V! B+ D

  82. ! p* Y/ r2 y$ J! Y. ]  J' D: f! ~% X
  83. .shui-b {
    ; k' \4 \+ _# s; l
  84.         position: absolute;, Q0 h6 F- c! S
  85.         top: 14px;8 T7 R( K! t. v6 a, J1 E
  86.         left: -2px;
    $ q% E# `8 i$ f% u2 d" b8 r
  87.         width: 10px;! i. H5 a3 U1 _/ @
  88.         height: 10px;% O5 e# Y  A& _$ g5 f6 Z$ g! j
  89.         background: #dc8f03;
    % Z) s  J+ k1 D" t" M' f9 C
  90.         border-radius: 50%;
    , F) B  r7 d8 g! d$ N* g; h
  91. }8 ?! A2 ?( d3 s6 _1 m' X
  92. ( T! e/ n- z1 b
  93. .shui-c {4 M; `  H7 n" [6 t& p) l
  94.         position: absolute;
    ) J7 X1 Q0 \$ j3 K2 o
  95.         top: 18px;
    1 E7 [  ?  b( `4 z
  96.         left: -2px;: X9 S3 m7 ?* A
  97.         width: 10px;
    ! {8 m: Y4 D3 c, l
  98.         height: 35px;
    6 e9 S+ H: T( E
  99.         background: #ffa500;" ~/ ^" E$ J0 j7 {+ V
  100.         border-radius: 0 0 0 5px;
    - X& s# w0 G' B" q7 q
  101. }& g4 i" g& g% i+ g

  102. * V9 \- X/ T  c. }
  103. .deng:before {
    0 k  p: G( O7 [
  104.         position: absolute;
    / {) v1 I4 c. d9 Y  p8 p
  105.         top: -7px;5 \. v2 H- m5 ]( v1 n3 O
  106.         left: 29px;
    9 Q/ Y" j2 c4 e8 x1 }
  107.         height: 12px;9 {0 o/ z0 {- j0 u2 h
  108.         width: 60px;
    5 k& f3 u8 j. Z+ T9 Q! f1 w
  109.         content: " ";
    0 q) h: }- T0 o4 S% u
  110.         display: block;
    / }7 e! |5 P8 @. C% I
  111.         z-index: 999;: ^, A" w) I% [2 b2 W9 C
  112.         border-radius: 5px 5px 0 0;; N, v$ n+ ]/ p! E* W6 d  k
  113.         border: solid 1px #dc8f03;
    / Q1 N. g# a& g, r
  114.         background: #ffa500;+ v" I( t, j& u- y* H
  115.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);! q' Q9 H" O; u4 L+ [, k5 p
  116. }
    1 u* v, b8 S' }! w5 u3 v
  117. , E: a, o& }* ?1 _/ ~) i7 W  a# z
  118. .deng:after {
    $ L& j, g8 d: v- I) g0 p9 p
  119.         position: absolute;3 {; C5 S- y# v) i$ J. [
  120.         bottom: -7px;; m" f# B4 P7 i4 c* \
  121.         left: 10px;
    $ I5 c) w7 b5 }# X7 }: m/ M
  122.         height: 12px;- K/ \4 v3 ?( \! e/ l  h
  123.         width: 60px;
    + T# g: @) D: _) ^% h5 I
  124.         content: " ";0 Q6 @: G& c  V0 H9 F+ p3 ?, @
  125.         display: block;. {  a0 r3 {# D% K
  126.         margin-left: 20px;
    , D+ N3 _: h- ?6 i4 K0 F6 E( z, ]; R3 Z
  127.         border-radius: 0 0 5px 5px;
    - p, }- `; ]% X
  128.         border: solid 1px #dc8f03;% b" r: E6 I7 o- p
  129.         background: #ffa500;
    ; l( Z7 [$ B: M' }0 }
  130.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
    0 e' s7 {* c1 Z: l7 w4 Y2 N
  131. }4 m. q( J/ o) H0 u: z3 R" K0 y( O

  132. 2 d& x$ _# t1 {  r- k, [9 X
  133. .deng-t {  Q8 F9 L% J$ d% w/ F0 b' O
  134.         font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;3 C+ R8 l+ T$ D7 s. n8 @8 [
  135.         font-size: 3.2rem;- \2 Q% b0 m) P
  136.         color: #dc8f03;' j8 O! x5 s+ W. r
  137.         font-weight: bold;6 p0 k: r+ t/ \9 L6 V" C
  138.         line-height: 85px;
    ! u4 l5 v. C8 u1 G' h; C2 p
  139.         text-align: center;
    , K2 u& z( o5 b
  140. }
    / I6 W4 M; t" e' d6 n# g! z2 q

  141. ( I5 f5 L! n8 X/ ~/ k+ a# `% y# F
  142. .night .deng-t, 4 Z. _7 a8 U/ N' H5 y
  143. .night .deng-box,
    7 F4 ^1 Y! ?5 f, A% _% o
  144. .night .deng-box1 {5 H: P5 j: ^7 a. @: y: C. E
  145.         background: transparent !important;7 X. E! I+ y8 g5 F7 w
  146. }; A% M( `# e& E2 o

  147. % i% l9 l4 I& \# i' A
  148. @-moz-keyframes swing {7 Y) Y, ~+ K$ i5 d
  149.         0% {
    4 q8 n) ~3 r# ^; R6 z
  150.                 -moz-transform: rotate(-10deg)
    % d! u0 F' ~9 W9 p
  151.         }, f8 @; u9 t$ J
  152. . H5 i7 G8 Q; P3 P8 X0 N# a: s% k! A
  153.         50% {
    2 g0 n; _7 n! m" T
  154.                 -moz-transform: rotate(10deg)
    0 C: ~) \: \" ~7 S3 M8 s8 x
  155.         }
    9 u9 y  }0 j( _: e$ g

  156. " w- T6 N/ L$ m2 U
  157.         100% {4 ~  a0 _! T5 O+ a
  158.                 -moz-transform: rotate(-10deg)
    7 |0 {8 y) Y8 P
  159.         }
    " I3 R1 e" A9 c: }% e& j4 i
  160. }
    2 d5 o4 T) e" \. o

  161. ; y9 _* Z9 S% f) S* v, v
  162. @-webkit-keyframes swing {3 F) z& _: I2 W) J' j8 w
  163.         0% {
    0 m) v# j( R" I* |, {" r7 Y  I) G
  164.                 -webkit-transform: rotate(-10deg)  d! u! }4 e# p
  165.         }
    " ?9 N; h% M8 h9 u

  166. : M. j4 }' k! Y$ D! q
  167.         50% {+ P9 P( Q* o, F; U& B4 h, m
  168.                 -webkit-transform: rotate(10deg)' Z2 l, F: l. R( S* o( \! [
  169.         }
    " M/ Y# K9 Q" f* h4 o( W

  170. " n. }0 ^( g. ^4 z
  171.         100% {9 g4 o2 Z. o: a. a4 l) L9 O
  172.                 -webkit-transform: rotate(-10deg)
    : [2 i, r0 f8 e
  173.         }
    & G" W; c3 \( G1 i6 Q
  174. }& ?; w  U; _0 m+ P. K: O- v
  175. </style>
    0 M& }9 p- L+ W1 Q) p1 P6 b
  176. <body>& n& M# t; ]$ a6 J: ]% E
  177. <!-- 灯笼1 -->
    , y* D' w6 b& c' C& v0 v
  178. <div class="deng-box">/ X2 W  p6 x$ S% x! p
  179. <div class="deng">
    ) @2 V: M8 e8 B; u
  180. <div class="xian"></div>) S: z1 q7 w* \/ P; g# v
  181. <div class="deng-a">! m7 R  U2 f1 d& h7 ], _
  182. <div class="deng-b"><div class="deng-t">庆</div></div>
    4 g* W! p0 u/ n" X( a9 S# a( k% x
  183. </div>
    ! F0 i! N+ c# D" R
  184. <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>. j& I) g) g- c! W+ c! K/ H+ x7 R
  185. </div>
    6 ?. h$ N) P+ c% `
  186. </div>5 j" a8 [4 N6 Z6 M9 X& i: Q
  187. <!-- 灯笼2 -->
    : F) O6 x* c+ y7 w
  188. <div class="deng-box1">: a( n. T( t* c7 d  T  x" M- r/ A/ {
  189. <div class="deng">, `* s2 I  x, j
  190. <div class="xian"></div>
    . V# |- \5 B& t) X- G
  191. <div class="deng-a">  a2 E% ?. ]: [$ Q7 a) N
  192. <div class="deng-b"><div class="deng-t">国</div></div>! s$ y' z: f; X
  193. </div>3 Z8 e+ ?. V; u1 B, t' j& C4 K
  194. <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    ( }, e2 w; O4 P1 {8 v% a
  195. </div>
    / ~, V; k% r) ]3 T
  196. </div>) Y0 A- D2 _, V% o
  197. </body>
复制代码
上面是两个灯笼在摇摆(示例：www.5gbbs.top），在右边。现在要加两个在左边。该怎么加代码？
- h" ^+ d; G; L, Y" I( n' Y! b, L- w. K4 W" e: q1 v8 f
回复

使用道具 举报

cardz! 发表于 2020-9-29 04:10:06 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

59id 发表于 2020-9-29 10:39:27 | 显示全部楼层
为了搞这么个没用的东西  加那么多代码影响网站访问速度  自己又还不会 我觉得你还是算了吧
回复

使用道具 举报

 楼主| cao1987 发表于 2020-10-1 17:50:12 | 显示全部楼层
已经编辑出来了。效果图+ y  p6 h$ k$ ~2 N, N
2 ]5 M2 s5 j9 V+ X8 {) \* w

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

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

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-12-22 20:04 , Processed in 0.022523 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

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