- <head>
2 Z1 p P6 [6 w& e - <style>
( H) N) W, l- C' D! v - .deng-box {
0 I& e& i) M) i - position: fixed;
, m& T3 w) W7 t- w - top: -40px;) R- }( z! x% {" P
- right: -20px;* c. p: z5 b) ]" _
- z-index: 999;
5 I) Y$ }+ Q) a0 P - }, v& f0 P. f& a
- 4 K/ Z, ]" D4 V5 O; `
- .deng-box1 {- G) K3 W5 v/ q f
- position: fixed;
5 z5 H; o0 Z. f1 I0 e2 l( p% o - top: -30px;' y" [) v' q# y) R- X
- right: 10px;
* Z# [- y( c" B - z-index: 999;1 W0 r6 G: n& V7 N. S' y
- }0 y+ \( Q8 v& S8 k
-
6 S, r# i# J W+ l3 u3 |# i. c5 ~2 O - .deng-box1 .deng {/ _; e1 {, m) O9 m2 R/ w
- position: relative;& b/ A9 h) q, @
- width: 120px;
~6 o7 ~& T U% ?7 d' H y - height: 90px;; c! y2 Z4 F, c6 a
- margin: 50px;$ M* P2 q5 v" e+ M7 S( ]8 P& X8 D( o
- background: #d8000f;
+ u6 B8 e( k! {, r. g) I$ X. S - background: rgba(216, 0, 15, 0.8);
& [9 _1 Q' m/ i - border-radius: 50% 50%;0 c* P" `% B/ q7 B
- -webkit-transform-origin: 50% -100px;
7 s3 T+ [" _) r$ C) p - -webkit-animation: swing 5s infinite ease-in-out;' X @$ i! N% ~( M4 o
- box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);! g8 M% _$ ? K- u5 h
- }5 S% J4 P5 k. _" P2 U' l
-
" o6 x4 z4 n- \" E1 D: l/ Y) ^ - .deng {
! B, w/ F* [& [0 r - position: relative;
' ?, J- k; M% d K' r' W; \) d - width: 120px;
: A+ F( b6 X: @ - height: 90px;
6 B* }% |" T% Z' P - margin: 50px;; c* V3 ] B2 e
- background: #d8000f;
, N7 ^9 `8 W; `4 y. u; B - background: rgba(216, 0, 15, 0.8);9 m4 j9 l- Y( M4 P8 n5 [
- border-radius: 50% 50%;' k8 e8 n1 g" L1 u0 w
- -webkit-transform-origin: 50% -100px;
7 U6 \1 C$ g; t9 r0 Z - -webkit-animation: swing 3s infinite ease-in-out;: o2 R' q# a$ W5 W9 t
- box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
8 x0 @1 H, C6 n! O2 r. I: x0 | - }
& z. B9 F. s0 `: H' V - 8 k2 f9 `8 f) O' r. m( }
- .deng-a {
6 I( k0 x! D( b. m _+ ~( _ - width: 100px;' V" C6 @3 p9 D& z
- height: 90px;4 Q! {$ C" K- h; w8 c- x/ i
- background: #d8000f;+ Y$ y$ V* F# w/ n. [
- background: rgba(216, 0, 15, 0.1);& N4 N- }9 V" r+ N* J
- margin: 12px 8px 8px 8px;# q& B7 M6 A7 I- J) E) G
- border-radius: 50% 50%;2 ~1 U h; c5 o2 e9 _9 T
- border: 2px solid #dc8f03;1 e% \3 e% `6 ?( j7 e2 }+ U$ s2 ^ z
- }
5 Q' u4 {3 E$ B, s -
+ V6 G) L, |+ L M6 F - .deng-b {
9 X) B0 o/ z( B, _# i" Y9 u - width: 45px;. s4 Q- l- y6 g
- height: 90px;
3 p" w, L+ o4 _+ j3 x - background: #d8000f;
3 ]1 l/ c& \' Q. b! c! U2 X$ X) ] - background: rgba(216, 0, 15, 0.1);
. G6 r" K" P% K+ Y* S - margin: -4px 8px 8px 26px;% K7 A5 h; N; @
- border-radius: 50% 50%;" W0 B# A5 H7 b$ C& Y, A1 }
- border: 2px solid #dc8f03;
3 o$ X; Q+ |' ^' O+ d - }
0 x6 l M3 I- q* [/ W' _) G/ U -
/ m" U3 @6 y$ j8 R1 J/ ~; C5 q' y# N - .xian {' B; `$ L7 T3 z: f2 I
- position: absolute;
# K+ R" b' x; p) w - top: -20px; D/ D8 V r2 W, m) M" H& O& s* R
- left: 60px;( B; Z$ g3 g8 [+ i
- width: 2px;% g$ o. O+ \! U J g( C; ^: L8 x
- height: 20px;$ t% O# g' ]( Z7 D4 L
- background: #dc8f03;
7 ^7 U+ _1 S3 F: q& m4 U - }
. D! e: }) L7 k; d8 k - Z' Q0 g3 N- K+ g# _9 \
- .shui-a {
% z: Q. y2 ?+ |# H, \ - position: relative;) k6 i+ i- p1 h+ g7 W% e
- width: 5px;
2 Q' R, E, V+ B2 F6 ~ - height: 20px;- P! y* {& a$ W2 N2 s: E
- margin: -5px 0 0 59px;
@# c( s. Z, f - -webkit-animation: swing 4s infinite ease-in-out;
* B' U4 C" l) b; G+ b- e( K - -webkit-transform-origin: 50% -45px;
1 |$ u3 I# I2 `, C2 ^8 { - background: #ffa500;
3 y% _2 X {4 t7 m+ V* ~& E - border-radius: 0 0 5px 5px;
* R9 T+ p* @( k0 L - }
5 u" F3 [9 K! U) e -
4 s/ l/ z; F) h( |1 }' S - .shui-b {9 V1 l. |8 {7 y, R& z
- position: absolute;* {/ \1 n) O! K; Y, Y' B
- top: 14px;% ?6 e2 G8 W& a$ d( N" O+ d0 ?
- left: -2px;
) g$ e, |2 i* K! `1 }: s/ `% ` - width: 10px;
# ~* S" f% U# v( c/ P - height: 10px;' ?( ~* Y$ U3 l
- background: #dc8f03;" J' m& O9 ~; ^5 M* n" A0 o7 \ l
- border-radius: 50%;
$ N6 ?" s2 s6 t! e6 I0 R - }; r4 e; u- X0 ]( I6 [! { P7 z) r+ f
- 9 |* Y" v) J( o/ v' o* E$ N& M+ |
- .shui-c {9 x$ [+ F6 k. f7 @+ q: s
- position: absolute;* @( `/ _. w0 W' E7 ^* t$ t
- top: 18px;
+ e' F E3 x6 I: N0 {% `, B" M/ s0 z - left: -2px;9 V6 i0 P' s0 R1 N
- width: 10px;
0 W2 G' v$ V- K* F - height: 35px;' `6 I7 Y3 m" Q& w0 U
- background: #ffa500;# J3 S$ l; V4 S0 x
- border-radius: 0 0 0 5px;6 B; ?7 H; d" w
- }
& i2 ^" V# K8 h$ |2 b6 P" S -
- R. S1 }3 l; G! k* d - .deng:before {
' t0 j6 k" g& {; `0 e - position: absolute;
! Y; R6 }% Y T! t+ j% m* C - top: -7px;: ~7 O n1 Q$ F% z. Y7 z& Y+ B
- left: 29px;
) Z0 A0 V* M% P G8 x6 `5 @ - height: 12px;- R+ f2 H) L( I( G
- width: 60px;4 r% U: W: }; V
- content: " ";
8 q4 J" b N% A V' F) _ - display: block;
& w- y- y: N% Y# }$ H - z-index: 999;
$ ~. W* Y- `" l$ I' y- m - border-radius: 5px 5px 0 0;
( D, m3 \- T2 Z, K; T- r - border: solid 1px #dc8f03;
, E8 D* q4 d) c# w1 } - background: #ffa500;
0 k% ^( B) E2 q8 g' B. i# R! j - background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
8 u0 `7 i: z: Q' [5 { I - }$ N( N) J- j$ r, i% x
- ( b" ~3 K0 j( e' U' ~2 Z5 y
- .deng:after {
: D) k0 B) @8 n - position: absolute;7 W8 ?9 m% y" I9 @5 q
- bottom: -7px;
8 ?; M3 v3 u9 m# i3 m2 C - left: 10px;
) Z/ u: M6 B$ B8 G - height: 12px;
' l, A" ^; e. g k - width: 60px;
: @! V% ?( V! ^# `4 } - content: " ";$ U1 S% t3 ^$ Z7 M+ A. o
- display: block;
. D8 C, J$ h- K' I1 Y - margin-left: 20px;8 S6 R* {+ p% d
- border-radius: 0 0 5px 5px;9 ?/ z2 Z8 c n8 M4 J
- border: solid 1px #dc8f03;
; v; V$ q0 d! e3 n$ q4 s0 u - background: #ffa500;" D* L6 I ~0 @: O8 `5 L
- background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
5 `- ~/ ~/ Q% d) S0 d) B - }
; Q7 G/ ~( V4 ]9 M -
- D( K; y6 C* l$ G - .deng-t {
- z/ E- |' ^9 d, d. M* U/ w" A - font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
$ G: ]4 ?- }/ M- b - font-size: 3.2rem;2 C( Q2 J2 e; v1 b
- color: #dc8f03;% Z; s3 W T$ }& j7 U5 l9 R2 z
- font-weight: bold;1 {. B2 i+ [& j9 r+ N( [
- line-height: 85px;% T! U6 B8 a# K- {! |6 y
- text-align: center;" l$ D/ ]) t' P1 Q1 }6 l
- }/ H% L0 W5 m ? N) E( T# q {5 r4 P
- ) e4 N0 z1 Z$ C/ Z! c ]8 b/ z
- .night .deng-t,
% ^ P8 j& \' R. k' t - .night .deng-box,
& o/ ?1 P! C7 d' \. t2 O - .night .deng-box1 {
$ p" j/ g4 m4 ]/ U - background: transparent !important;4 C" O, f) k/ b) L9 a% ^3 i& c) @
- }5 ]5 J7 ?% D; s5 K
- 6 I! {3 M* M) F
- @-moz-keyframes swing {
$ Z+ x5 q" V4 L, k7 Q - 0% {- E% e) b- G8 b$ j: B
- -moz-transform: rotate(-10deg)
; ~3 t9 ]& g) | - }" t+ M4 t$ H% X' ?/ m [
-
: z: I/ k3 s `0 }5 m! ^ - 50% {
7 m7 I4 x* z% C, F* U - -moz-transform: rotate(10deg)4 h3 C4 j$ ^7 W* p
- }
* E4 |) p1 h3 W$ {% G0 E- Y. x - : I Q1 c* G- n& o" |- f
- 100% {
, i2 [7 x+ @6 p6 e4 r2 t - -moz-transform: rotate(-10deg)' K2 Y; x( d4 A: c
- }5 G, }: n( f0 K/ \4 i+ |
- }
0 o6 Z# m5 a% F -
/ r; l+ s9 Q- x6 O% s' n2 o1 i6 y - @-webkit-keyframes swing {
4 B) H0 z s9 O: y V; P$ X4 X5 d! b - 0% {: T/ [8 J! V. T8 {6 `
- -webkit-transform: rotate(-10deg)
# m; l( K8 i8 Q- {, H - }
* h+ Z, J6 g8 z+ z, G6 U - / _% K' r6 ?/ ]' G( C
- 50% {
" v( r6 O T1 B6 J( t - -webkit-transform: rotate(10deg)0 }" H9 K. [8 B! _1 z6 t
- }, X0 T5 E: b/ T. X! a3 W- M% V
- 3 q& T' e1 N! W& n8 ~1 m2 ~: |
- 100% {
: z' O, |9 ?8 D/ I - -webkit-transform: rotate(-10deg)
# e: d: Y6 ~1 G0 k+ [, \ - }1 ^" B6 ^' O8 r, m7 G- h
- }# y+ i3 Y' L C- M
- </style>
8 N! P6 i) s: h% y9 ^ - <body>. H; u' j/ z! F" }8 W
- <!-- 灯笼1 -->- p2 W5 ~. B" x$ K: a2 j6 J
- <div class="deng-box">
+ M; K+ a9 ]' G: W2 f- {4 c- G - <div class="deng">
/ }: M5 H6 |. [6 L7 \' Y" N - <div class="xian"></div>
; @) t/ k* K& W0 r; M - <div class="deng-a">+ W8 M! o W6 ~; _, f9 e
- <div class="deng-b"><div class="deng-t">庆</div></div>4 F) R$ ~2 k9 C5 l* H' V
- </div>
5 b! { m$ N; A* S0 ~ - <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
3 S0 T6 G8 S2 }( I2 z" U+ Z; G - </div> A/ X6 Y7 m' j1 h+ b
- </div>
) }. N3 ?; t' ? - <!-- 灯笼2 -->" h2 o9 e, K6 ^
- <div class="deng-box1">- s0 L+ R* C0 w' m7 m2 U9 [$ b# u/ J
- <div class="deng">
0 F. |' B# P' t/ l) A# e/ S - <div class="xian"></div>
4 v: Y% @1 ?- W! ]5 M: [) o - <div class="deng-a">+ L) u2 ]* h) X/ s8 B
- <div class="deng-b"><div class="deng-t">国</div></div>" t5 B1 h/ z& y5 e
- </div>
7 \: T3 F7 y+ p& j6 I f - <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
: n, L9 \, q6 K7 F; u- { - </div>
3 u2 l5 W/ M; V8 J, V - </div>
7 _+ d3 w% e/ @9 i$ |8 c+ O - </body>
复制代码 上面是两个灯笼在摇摆(示例:www.5gbbs.top),在右边。现在要加两个在左边。该怎么加代码?
, Q) I+ w w9 J) I0 ~- y: R
) V& R+ ^ s1 M9 E" S8 Z2 \/ h |