- <head>
, A5 p# m9 ^5 J9 v0 l0 { - <style>
2 W9 W5 b1 J, h9 h, i - .deng-box {
% N% F/ B, U5 b4 \( Y. W7 D6 S9 k - position: fixed;% A4 G/ z. \7 x& t! I/ m/ {: n
- top: -40px;
: I7 u! H0 ~6 ~, r - right: -20px;8 j( d) D6 d7 y$ a2 S
- z-index: 999;
: H7 c$ _2 z9 W8 i7 p7 g- }" G - }
2 ~5 Q0 m1 R" \. |& v2 W - 1 ]- M f/ u" k! r2 Z& j; R
- .deng-box1 {6 A) y/ ?! ?* y7 n7 r3 a: I
- position: fixed;4 p1 \/ {7 |) J! e; |5 ~& i. |8 J
- top: -30px;
& H. Z8 V2 v% l/ X+ N1 O5 y' b - right: 10px;
! Q }$ P1 Y: `2 d% _8 n! @/ ?8 X - z-index: 999;
6 T, e9 E; {3 F9 r( X - }
! ]# l5 ^6 M8 m( P' X - 9 y; F( p* f. r9 `
- .deng-box1 .deng {
5 Y4 t2 L' G% `: b+ q% T; A - position: relative;
) C) j. k4 ~& k# v- m' g" C - width: 120px;1 z+ R2 J1 t0 D3 Q
- height: 90px;
- o- Z1 g; ]3 c; U0 p3 P4 q - margin: 50px;
5 _) v, t/ |! H - background: #d8000f;
* u! Y, ?: ?# g* r# ?9 Z5 b& t* n - background: rgba(216, 0, 15, 0.8);5 a( g1 Q; Q5 a- X0 Q$ ]5 T' }! k2 Z
- border-radius: 50% 50%;+ K/ `/ g1 C4 e- l
- -webkit-transform-origin: 50% -100px;
. @% Q6 u2 b$ V: E - -webkit-animation: swing 5s infinite ease-in-out;
/ n7 j( T( E1 a6 W7 \1 _ m/ d - box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);" P& p% ?* i" S. r
- }' K' o% o$ u% X8 D
-
" k, }" v9 a6 b6 N* b+ }8 [* [ - .deng {
7 m. {( t) x3 o% {5 T ?6 r - position: relative;
. F' `' p2 `" {# d) _' I1 S, I - width: 120px;
5 s8 i9 [# A& O; y - height: 90px;" x' ?; y W4 _6 c; e+ a
- margin: 50px;
3 {& k' }. @" v$ e8 H - background: #d8000f;4 ?1 }4 r/ S" v+ F$ Z
- background: rgba(216, 0, 15, 0.8);
% l* l, @( Q6 n- p' T - border-radius: 50% 50%;5 k" {% v' p% l" b. J% W" i$ e
- -webkit-transform-origin: 50% -100px;1 ~ e0 u& j2 [ o) r
- -webkit-animation: swing 3s infinite ease-in-out;9 Z8 x2 X/ \4 D; V
- box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);8 r5 }* T2 f( S5 O
- }
! E# O1 B% F B, ?# B+ y3 K -
# Y* O1 C, O/ s- [ - .deng-a {
* v2 x# ?1 i9 [ - width: 100px;) Z: N0 t: G8 X3 W, d
- height: 90px;& ]1 n y# y- V/ G( z2 v- P7 K1 b) a
- background: #d8000f;
. J8 e/ n. A9 W+ X& \ - background: rgba(216, 0, 15, 0.1); A) q# T$ u/ q$ m
- margin: 12px 8px 8px 8px;
% D& s5 s) F/ b+ e4 }! ~3 G& j) C - border-radius: 50% 50%;- K/ M. X) G o6 K2 b
- border: 2px solid #dc8f03;
+ L5 E5 ~6 q: Q/ j( x - }! F9 Q& Z: H: x" K3 g
- 9 [8 |) P+ H0 U1 C; M+ I8 i
- .deng-b {
; O2 {% e$ v: T - width: 45px;
' i6 ]- a$ c. o) s- v0 p - height: 90px;6 z; a6 Q+ U4 b: m _3 Q
- background: #d8000f;
2 T# M8 N2 I8 }6 P/ T6 V6 n - background: rgba(216, 0, 15, 0.1);
5 ~5 W S; j% z - margin: -4px 8px 8px 26px;
8 ~# W0 V/ E+ t* k1 a4 ]+ j - border-radius: 50% 50%;( {8 g e/ `0 ]4 }0 K
- border: 2px solid #dc8f03;: H, s& T) {" @; f3 N7 a( _
- }
4 D) G. X% }8 x: Z+ t r& q - % U" C4 M6 w0 P+ U1 t- y* {' w
- .xian {
1 K, t% r4 G" ~$ M) ]# z - position: absolute;
& @1 A- b- r, ?* B3 F - top: -20px;* j9 }' J/ L; x$ {
- left: 60px;( a) I" K4 n0 {( J, D' w; W
- width: 2px;
0 A6 d+ g y1 L5 T - height: 20px;
$ {: s& k1 K0 F0 S" M% ^2 E' l+ c - background: #dc8f03;
- r. l A% O6 C9 ]! e% ? - }0 b% _( K3 n% o+ G) b: i
-
) k. K# d/ E6 ]* @* Q) u1 s0 c - .shui-a {
2 O! D2 [3 y8 M! B - position: relative;1 v% K" s7 M: l, X6 H& D# A8 j
- width: 5px;! M. T& d6 k# W
- height: 20px;' ~' a0 a' M, ~8 I7 Q( K
- margin: -5px 0 0 59px;
) T2 d4 j- B4 |" G - -webkit-animation: swing 4s infinite ease-in-out;
% b, g) ~) V" i! ] B# m - -webkit-transform-origin: 50% -45px;( K( a% Z( N7 ?2 F
- background: #ffa500;
5 e j1 q6 b d; z - border-radius: 0 0 5px 5px;
/ w f- E: [+ \3 r5 E - }1 Z) q: S$ `$ l. e2 V
- ( k+ z$ L: {, }0 b$ R
- .shui-b {, F/ s% f9 @) B- V
- position: absolute;% ]! |1 p3 P- _) y% ~9 B( t6 `
- top: 14px;
3 i* s* P7 { A) k% {0 J - left: -2px;/ Y# q9 X% M. i9 {" U! R
- width: 10px;7 C: [+ T" |# [/ Z: U
- height: 10px;
4 Q- P( R1 _ A! r) ?) `6 P' W - background: #dc8f03;
, x9 ]( b- b+ Y9 e" t - border-radius: 50%;" u( i- I. ]& f! z+ @
- }
4 ~1 z& M0 C5 g* X6 g - ! O1 q# W+ C& K! r1 h
- .shui-c {2 J! ^3 ?% ]# w- U& Q+ C
- position: absolute;# T7 C% K9 T3 V% j/ T [9 f
- top: 18px;
, s7 G+ q8 f3 S9 h - left: -2px;/ Y. f! W0 }. k4 |/ f$ a' C
- width: 10px;0 u m# N. ?* @! \ b5 V
- height: 35px;% E) p) ]8 g/ w
- background: #ffa500;
% T, r$ [# {; p9 I - border-radius: 0 0 0 5px;
$ i4 ^, l3 W; w* Z - }3 g! P, l6 G6 K" U
- + N q o0 ?1 S6 ?) [
- .deng:before {5 m# }5 i }- I+ M- Z0 M
- position: absolute;8 q; z& u5 O6 ?* H
- top: -7px;
2 P" t. y8 I) H0 I3 x: z - left: 29px;
+ u( l' [7 v" n& l+ t2 t4 M4 T$ N - height: 12px;
/ X5 ] m: p3 z" u1 W! Y - width: 60px;
2 e: l6 n; t( E" T - content: " ";4 A: z' p2 J6 d* F) t! B
- display: block;7 t. W8 f1 H" w: ]
- z-index: 999;
8 A O% V7 @' X x4 K% W" T/ P- T - border-radius: 5px 5px 0 0;
& U8 J7 z6 J: A( @; w0 X - border: solid 1px #dc8f03;
- O5 ^( K. B9 V1 r% d - background: #ffa500;! C6 t& ?% N5 F; y2 F$ `' H- X2 {/ D
- background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
& w4 h) I% B/ V" z [8 I7 r - }
m- u* E* q/ U1 Y- R8 _6 N - z0 |0 M& z! D; r5 i+ n2 Q3 N
- .deng:after {
* m* |6 ^, v' u& }& Q - position: absolute;
/ k( {6 N0 e4 ~) u# z - bottom: -7px;
' D/ f i4 ?, b1 w9 U - left: 10px;$ s5 K. ]1 T4 ~) g
- height: 12px;( b+ s% K) O' m5 d$ Y. @
- width: 60px;
2 Y7 ~0 ]. v2 G G' } - content: " ";! F7 ?1 J$ y* B6 q7 [
- display: block;# c" u% t" ?6 K3 E
- margin-left: 20px;) N8 e) h" L' S
- border-radius: 0 0 5px 5px;: R% o: b/ A+ O |# |. ]2 s
- border: solid 1px #dc8f03;, ?- C9 v% u! m) G3 i0 q
- background: #ffa500;; Z6 u4 l7 }* b# W; Z5 r. d8 R
- background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);+ V: [/ C7 O- }, c2 p ?
- }
& `4 X* F. Q6 j6 k% G - % k0 e1 }; _) K9 X5 Q/ ?8 x4 b
- .deng-t {
. h# \$ |. s1 k8 o& _ }, |7 C/ i - font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
! l9 |& l" f( Q4 X3 _' f - font-size: 3.2rem;7 X5 X: c& {* i" k+ r+ a1 _
- color: #dc8f03;
- ?' m( |) U( H6 N. o - font-weight: bold;% j5 c m* y _
- line-height: 85px;3 [/ g: Y) r% ?
- text-align: center;4 V( O/ t0 }2 _' x( y
- }
* n5 [+ {) G+ o7 I2 \1 h - 9 r* o% O1 F5 s& [/ }
- .night .deng-t, 9 g; J. ?+ ]2 Y( B
- .night .deng-box,
3 h; \) l# t1 x$ Z- T - .night .deng-box1 {1 M+ I( ^/ ]4 q- N+ @% k
- background: transparent !important;) {' ?. |8 d' k* z9 h
- }# a* c6 |% i6 U1 x2 Z+ i
- ; _% a3 W |$ V) _2 E
- @-moz-keyframes swing {( n$ Y3 q0 g4 s) N* c! T" K& R$ m
- 0% {# `, \" r8 [( o$ `# i4 Z: Z
- -moz-transform: rotate(-10deg)
4 y1 k3 G/ R: k q - }
/ K9 G0 N5 A' I4 I7 o6 k6 b - ! t2 n& f* r- i7 T+ {
- 50% {
. |1 ~+ Q; d3 j# ]0 Q - -moz-transform: rotate(10deg)
! s/ z, M% M; ~ - }% _% d6 x" D8 L' f5 j/ v0 a
- 7 O& S ^9 x/ e, \& S$ r6 \: ~2 i
- 100% {3 l+ }4 W3 {$ E* G; X& y h
- -moz-transform: rotate(-10deg)
4 l" b7 h w+ [$ Y% u6 l! @- N - }% ?, `8 V4 U, b
- }3 D4 K% Y1 `* w$ S' N b3 ?
-
$ U* v, i) u0 T1 I: s - @-webkit-keyframes swing {4 B3 l3 x- J! t/ {, a! T3 o
- 0% {
( |+ x& @0 R* U9 a4 p& U - -webkit-transform: rotate(-10deg), B5 M+ f+ n1 c
- }
! k' U1 B$ S+ [$ b. F" E; E# V - 6 H# u( [/ l4 t- e1 A1 j! ~
- 50% {
! ]$ P" F2 O0 L) v' ? - -webkit-transform: rotate(10deg)
8 }! E& `9 u& B0 D+ D - }3 E* g3 w I3 o1 C/ K% o' r4 q$ l
-
' ^8 N+ J/ l! a. x - 100% {
; Y+ L: b6 I5 x# X - -webkit-transform: rotate(-10deg)
% x6 P' r& g# b4 T4 Z5 P2 ^ - }
( p% M% g% A/ D - }9 _/ L6 x& \: A1 U$ C; c3 K
- </style>
! [4 @0 ]0 V% A7 N - <body>& L0 u9 |3 k, `# \8 ~1 ^
- <!-- 灯笼1 -->* H7 A8 d- q4 W% C3 A
- <div class="deng-box">* ` c0 P8 A& Z' F! Z) @
- <div class="deng">
1 u M8 o1 ^2 H# z - <div class="xian"></div>
\0 a2 ^6 j4 S! {- k - <div class="deng-a">
7 R( r! l! [; ]9 H - <div class="deng-b"><div class="deng-t">庆</div></div>3 T8 x9 F2 R6 ?# x" u, O
- </div>
' h- q8 P( C2 M, c! x2 w - <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>+ J2 o( S) M9 Y+ M; _
- </div>
0 ^- A, {2 A! I/ ]* g - </div>8 H0 ~4 X: z) j) x! N
- <!-- 灯笼2 -->
! B9 E! f2 ^! t# h0 w5 p - <div class="deng-box1">: i( D9 k6 e+ R$ \3 S
- <div class="deng">
3 `8 D4 H- f9 m# M! n x9 C2 u - <div class="xian"></div>
2 V0 O9 F: w8 h) m - <div class="deng-a">8 L1 n ?( b; t. s* ^: W0 \1 }
- <div class="deng-b"><div class="deng-t">国</div></div>
4 M \3 u' Z( E6 a, S! l! h - </div>% S( \3 D& P9 |( \$ Y6 _
- <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' { - </div>. o% Y5 x% W$ m( t* e! D7 D8 e8 r
- </div>) \1 V2 P/ ?& x* J% {# |* }3 A' X
- </body>
复制代码 上面是两个灯笼在摇摆(示例:www.5gbbs.top),在右边。现在要加两个在左边。该怎么加代码?
/ S3 U3 L2 C' ?8 t: P) Y) \+ ]1 J+ g* e/ l4 M* O6 X
|