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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[新需求] 有谁会看代码

[复制链接]
cao1987 发表于 2020-9-28 22:43:53 | 显示全部楼层 |阅读模式
需求发布
金额范围: 10-50 元
预算金额: 50 元
开始时间:
结束时间:
联系方式: 隐藏内容
  1. <head>
    , A5 p# m9 ^5 J9 v0 l0 {
  2. <style>
    2 W9 W5 b1 J, h9 h, i
  3. .deng-box {
    % N% F/ B, U5 b4 \( Y. W7 D6 S9 k
  4.         position: fixed;% A4 G/ z. \7 x& t! I/ m/ {: n
  5.         top: -40px;
    : I7 u! H0 ~6 ~, r
  6.         right: -20px;8 j( d) D6 d7 y$ a2 S
  7.         z-index: 999;
    : H7 c$ _2 z9 W8 i7 p7 g- }" G
  8. }
    2 ~5 Q0 m1 R" \. |& v2 W
  9. 1 ]- M  f/ u" k! r2 Z& j; R
  10. .deng-box1 {6 A) y/ ?! ?* y7 n7 r3 a: I
  11.         position: fixed;4 p1 \/ {7 |) J! e; |5 ~& i. |8 J
  12.         top: -30px;
    & H. Z8 V2 v% l/ X+ N1 O5 y' b
  13.         right: 10px;
    ! Q  }$ P1 Y: `2 d% _8 n! @/ ?8 X
  14.         z-index: 999;
    6 T, e9 E; {3 F9 r( X
  15. }
    ! ]# l5 ^6 M8 m( P' X
  16. 9 y; F( p* f. r9 `
  17. .deng-box1 .deng {
    5 Y4 t2 L' G% `: b+ q% T; A
  18.         position: relative;
    ) C) j. k4 ~& k# v- m' g" C
  19.         width: 120px;1 z+ R2 J1 t0 D3 Q
  20.         height: 90px;
    - o- Z1 g; ]3 c; U0 p3 P4 q
  21.         margin: 50px;
    5 _) v, t/ |! H
  22.         background: #d8000f;
    * u! Y, ?: ?# g* r# ?9 Z5 b& t* n
  23.         background: rgba(216, 0, 15, 0.8);5 a( g1 Q; Q5 a- X0 Q$ ]5 T' }! k2 Z
  24.         border-radius: 50% 50%;+ K/ `/ g1 C4 e- l
  25.         -webkit-transform-origin: 50% -100px;
    . @% Q6 u2 b$ V: E
  26.         -webkit-animation: swing 5s infinite ease-in-out;
    / n7 j( T( E1 a6 W7 \1 _  m/ d
  27.         box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);" P& p% ?* i" S. r
  28. }' K' o% o$ u% X8 D

  29. " k, }" v9 a6 b6 N* b+ }8 [* [
  30. .deng {
    7 m. {( t) x3 o% {5 T  ?6 r
  31.         position: relative;
    . F' `' p2 `" {# d) _' I1 S, I
  32.         width: 120px;
    5 s8 i9 [# A& O; y
  33.         height: 90px;" x' ?; y  W4 _6 c; e+ a
  34.         margin: 50px;
    3 {& k' }. @" v$ e8 H
  35.         background: #d8000f;4 ?1 }4 r/ S" v+ F$ Z
  36.         background: rgba(216, 0, 15, 0.8);
    % l* l, @( Q6 n- p' T
  37.         border-radius: 50% 50%;5 k" {% v' p% l" b. J% W" i$ e
  38.         -webkit-transform-origin: 50% -100px;1 ~  e0 u& j2 [  o) r
  39.         -webkit-animation: swing 3s infinite ease-in-out;9 Z8 x2 X/ \4 D; V
  40.         box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);8 r5 }* T2 f( S5 O
  41. }
    ! E# O1 B% F  B, ?# B+ y3 K

  42. # Y* O1 C, O/ s- [
  43. .deng-a {
    * v2 x# ?1 i9 [
  44.         width: 100px;) Z: N0 t: G8 X3 W, d
  45.         height: 90px;& ]1 n  y# y- V/ G( z2 v- P7 K1 b) a
  46.         background: #d8000f;
    . J8 e/ n. A9 W+ X& \
  47.         background: rgba(216, 0, 15, 0.1);  A) q# T$ u/ q$ m
  48.         margin: 12px 8px 8px 8px;
    % D& s5 s) F/ b+ e4 }! ~3 G& j) C
  49.         border-radius: 50% 50%;- K/ M. X) G  o6 K2 b
  50.         border: 2px solid #dc8f03;
    + L5 E5 ~6 q: Q/ j( x
  51. }! F9 Q& Z: H: x" K3 g
  52. 9 [8 |) P+ H0 U1 C; M+ I8 i
  53. .deng-b {
    ; O2 {% e$ v: T
  54.         width: 45px;
    ' i6 ]- a$ c. o) s- v0 p
  55.         height: 90px;6 z; a6 Q+ U4 b: m  _3 Q
  56.         background: #d8000f;
    2 T# M8 N2 I8 }6 P/ T6 V6 n
  57.         background: rgba(216, 0, 15, 0.1);
    5 ~5 W  S; j% z
  58.         margin: -4px 8px 8px 26px;
    8 ~# W0 V/ E+ t* k1 a4 ]+ j
  59.         border-radius: 50% 50%;( {8 g  e/ `0 ]4 }0 K
  60.         border: 2px solid #dc8f03;: H, s& T) {" @; f3 N7 a( _
  61. }
    4 D) G. X% }8 x: Z+ t  r& q
  62. % U" C4 M6 w0 P+ U1 t- y* {' w
  63. .xian {
    1 K, t% r4 G" ~$ M) ]# z
  64.         position: absolute;
    & @1 A- b- r, ?* B3 F
  65.         top: -20px;* j9 }' J/ L; x$ {
  66.         left: 60px;( a) I" K4 n0 {( J, D' w; W
  67.         width: 2px;
    0 A6 d+ g  y1 L5 T
  68.         height: 20px;
    $ {: s& k1 K0 F0 S" M% ^2 E' l+ c
  69.         background: #dc8f03;
    - r. l  A% O6 C9 ]! e% ?
  70. }0 b% _( K3 n% o+ G) b: i

  71. ) k. K# d/ E6 ]* @* Q) u1 s0 c
  72. .shui-a {
    2 O! D2 [3 y8 M! B
  73.         position: relative;1 v% K" s7 M: l, X6 H& D# A8 j
  74.         width: 5px;! M. T& d6 k# W
  75.         height: 20px;' ~' a0 a' M, ~8 I7 Q( K
  76.         margin: -5px 0 0 59px;
    ) T2 d4 j- B4 |" G
  77.         -webkit-animation: swing 4s infinite ease-in-out;
    % b, g) ~) V" i! ]  B# m
  78.         -webkit-transform-origin: 50% -45px;( K( a% Z( N7 ?2 F
  79.         background: #ffa500;
    5 e  j1 q6 b  d; z
  80.         border-radius: 0 0 5px 5px;
    / w  f- E: [+ \3 r5 E
  81. }1 Z) q: S$ `$ l. e2 V
  82. ( k+ z$ L: {, }0 b$ R
  83. .shui-b {, F/ s% f9 @) B- V
  84.         position: absolute;% ]! |1 p3 P- _) y% ~9 B( t6 `
  85.         top: 14px;
    3 i* s* P7 {  A) k% {0 J
  86.         left: -2px;/ Y# q9 X% M. i9 {" U! R
  87.         width: 10px;7 C: [+ T" |# [/ Z: U
  88.         height: 10px;
    4 Q- P( R1 _  A! r) ?) `6 P' W
  89.         background: #dc8f03;
    , x9 ]( b- b+ Y9 e" t
  90.         border-radius: 50%;" u( i- I. ]& f! z+ @
  91. }
    4 ~1 z& M0 C5 g* X6 g
  92. ! O1 q# W+ C& K! r1 h
  93. .shui-c {2 J! ^3 ?% ]# w- U& Q+ C
  94.         position: absolute;# T7 C% K9 T3 V% j/ T  [9 f
  95.         top: 18px;
    , s7 G+ q8 f3 S9 h
  96.         left: -2px;/ Y. f! W0 }. k4 |/ f$ a' C
  97.         width: 10px;0 u  m# N. ?* @! \  b5 V
  98.         height: 35px;% E) p) ]8 g/ w
  99.         background: #ffa500;
    % T, r$ [# {; p9 I
  100.         border-radius: 0 0 0 5px;
    $ i4 ^, l3 W; w* Z
  101. }3 g! P, l6 G6 K" U
  102. + N  q  o0 ?1 S6 ?) [
  103. .deng:before {5 m# }5 i  }- I+ M- Z0 M
  104.         position: absolute;8 q; z& u5 O6 ?* H
  105.         top: -7px;
    2 P" t. y8 I) H0 I3 x: z
  106.         left: 29px;
    + u( l' [7 v" n& l+ t2 t4 M4 T$ N
  107.         height: 12px;
    / X5 ]  m: p3 z" u1 W! Y
  108.         width: 60px;
    2 e: l6 n; t( E" T
  109.         content: " ";4 A: z' p2 J6 d* F) t! B
  110.         display: block;7 t. W8 f1 H" w: ]
  111.         z-index: 999;
    8 A  O% V7 @' X  x4 K% W" T/ P- T
  112.         border-radius: 5px 5px 0 0;
    & U8 J7 z6 J: A( @; w0 X
  113.         border: solid 1px #dc8f03;
    - O5 ^( K. B9 V1 r% d
  114.         background: #ffa500;! C6 t& ?% N5 F; y2 F$ `' H- X2 {/ D
  115.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
    & w4 h) I% B/ V" z  [8 I7 r
  116. }
      m- u* E* q/ U1 Y- R8 _6 N
  117.   z0 |0 M& z! D; r5 i+ n2 Q3 N
  118. .deng:after {
    * m* |6 ^, v' u& }& Q
  119.         position: absolute;
    / k( {6 N0 e4 ~) u# z
  120.         bottom: -7px;
    ' D/ f  i4 ?, b1 w9 U
  121.         left: 10px;$ s5 K. ]1 T4 ~) g
  122.         height: 12px;( b+ s% K) O' m5 d$ Y. @
  123.         width: 60px;
    2 Y7 ~0 ]. v2 G  G' }
  124.         content: " ";! F7 ?1 J$ y* B6 q7 [
  125.         display: block;# c" u% t" ?6 K3 E
  126.         margin-left: 20px;) N8 e) h" L' S
  127.         border-radius: 0 0 5px 5px;: R% o: b/ A+ O  |# |. ]2 s
  128.         border: solid 1px #dc8f03;, ?- C9 v% u! m) G3 i0 q
  129.         background: #ffa500;; Z6 u4 l7 }* b# W; Z5 r. d8 R
  130.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);+ V: [/ C7 O- }, c2 p  ?
  131. }
    & `4 X* F. Q6 j6 k% G
  132. % k0 e1 }; _) K9 X5 Q/ ?8 x4 b
  133. .deng-t {
    . h# \$ |. s1 k8 o& _  }, |7 C/ i
  134.         font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    ! l9 |& l" f( Q4 X3 _' f
  135.         font-size: 3.2rem;7 X5 X: c& {* i" k+ r+ a1 _
  136.         color: #dc8f03;
    - ?' m( |) U( H6 N. o
  137.         font-weight: bold;% j5 c  m* y  _
  138.         line-height: 85px;3 [/ g: Y) r% ?
  139.         text-align: center;4 V( O/ t0 }2 _' x( y
  140. }
    * n5 [+ {) G+ o7 I2 \1 h
  141. 9 r* o% O1 F5 s& [/ }
  142. .night .deng-t, 9 g; J. ?+ ]2 Y( B
  143. .night .deng-box,
    3 h; \) l# t1 x$ Z- T
  144. .night .deng-box1 {1 M+ I( ^/ ]4 q- N+ @% k
  145.         background: transparent !important;) {' ?. |8 d' k* z9 h
  146. }# a* c6 |% i6 U1 x2 Z+ i
  147. ; _% a3 W  |$ V) _2 E
  148. @-moz-keyframes swing {( n$ Y3 q0 g4 s) N* c! T" K& R$ m
  149.         0% {# `, \" r8 [( o$ `# i4 Z: Z
  150.                 -moz-transform: rotate(-10deg)
    4 y1 k3 G/ R: k  q
  151.         }
    / K9 G0 N5 A' I4 I7 o6 k6 b
  152. ! t2 n& f* r- i7 T+ {
  153.         50% {
    . |1 ~+ Q; d3 j# ]0 Q
  154.                 -moz-transform: rotate(10deg)
    ! s/ z, M% M; ~
  155.         }% _% d6 x" D8 L' f5 j/ v0 a
  156. 7 O& S  ^9 x/ e, \& S$ r6 \: ~2 i
  157.         100% {3 l+ }4 W3 {$ E* G; X& y  h
  158.                 -moz-transform: rotate(-10deg)
    4 l" b7 h  w+ [$ Y% u6 l! @- N
  159.         }% ?, `8 V4 U, b
  160. }3 D4 K% Y1 `* w$ S' N  b3 ?

  161. $ U* v, i) u0 T1 I: s
  162. @-webkit-keyframes swing {4 B3 l3 x- J! t/ {, a! T3 o
  163.         0% {
    ( |+ x& @0 R* U9 a4 p& U
  164.                 -webkit-transform: rotate(-10deg), B5 M+ f+ n1 c
  165.         }
    ! k' U1 B$ S+ [$ b. F" E; E# V
  166. 6 H# u( [/ l4 t- e1 A1 j! ~
  167.         50% {
    ! ]$ P" F2 O0 L) v' ?
  168.                 -webkit-transform: rotate(10deg)
    8 }! E& `9 u& B0 D+ D
  169.         }3 E* g3 w  I3 o1 C/ K% o' r4 q$ l

  170. ' ^8 N+ J/ l! a. x
  171.         100% {
    ; Y+ L: b6 I5 x# X
  172.                 -webkit-transform: rotate(-10deg)
    % x6 P' r& g# b4 T4 Z5 P2 ^
  173.         }
    ( p% M% g% A/ D
  174. }9 _/ L6 x& \: A1 U$ C; c3 K
  175. </style>
    ! [4 @0 ]0 V% A7 N
  176. <body>& L0 u9 |3 k, `# \8 ~1 ^
  177. <!-- 灯笼1 -->* H7 A8 d- q4 W% C3 A
  178. <div class="deng-box">* `  c0 P8 A& Z' F! Z) @
  179. <div class="deng">
    1 u  M8 o1 ^2 H# z
  180. <div class="xian"></div>
      \0 a2 ^6 j4 S! {- k
  181. <div class="deng-a">
    7 R( r! l! [; ]9 H
  182. <div class="deng-b"><div class="deng-t">庆</div></div>3 T8 x9 F2 R6 ?# x" u, O
  183. </div>
    ' h- q8 P( C2 M, c! x2 w
  184. <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>+ J2 o( S) M9 Y+ M; _
  185. </div>
    0 ^- A, {2 A! I/ ]* g
  186. </div>8 H0 ~4 X: z) j) x! N
  187. <!-- 灯笼2 -->
    ! B9 E! f2 ^! t# h0 w5 p
  188. <div class="deng-box1">: i( D9 k6 e+ R$ \3 S
  189. <div class="deng">
    3 `8 D4 H- f9 m# M! n  x9 C2 u
  190. <div class="xian"></div>
    2 V0 O9 F: w8 h) m
  191. <div class="deng-a">8 L1 n  ?( b; t. s* ^: W0 \1 }
  192. <div class="deng-b"><div class="deng-t">国</div></div>
    4 M  \3 u' Z( E6 a, S! l! h
  193. </div>% S( \3 D& P9 |( \$ Y6 _
  194. <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    4 }! R; c/ Z' t5 R. Z2 A7 e' {
  195. </div>. o% Y5 x% W$ m( t* e! D7 D8 e8 r
  196. </div>) \1 V2 P/ ?& x* J% {# |* }3 A' X
  197. </body>
复制代码
上面是两个灯笼在摇摆(示例:www.5gbbs.top),在右边。现在要加两个在左边。该怎么加代码?
/ S3 U3 L2 C' ?8 t: P) Y) \+ ]1 J+ g* e/ l4 M* O6 X
cardz! 发表于 2020-9-29 04:10:06 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

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

使用道具 举报

 楼主| cao1987 发表于 2020-10-1 17:50:12 | 显示全部楼层
已经编辑出来了。效果图
, t3 @1 g3 m: }5 t; l9 @4 j& S9 g
9 L. x+ W) B1 ~# X; k- _* r: `+ q9 d

本帖子中包含更多资源

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

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-22 20:29 , Processed in 0.022688 second(s), 4 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

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