- <head>
* G: r- n7 B* o - <style>
; K% ?: G# d- Z - .deng-box {
O+ B' j' s; e' @) Q - position: fixed;
. W: |) A1 A3 A& ? Z5 F - top: -40px;% K( J+ }3 B5 U/ p& |) D& U
- right: -20px;
$ J3 K# O s+ F1 f: _ - z-index: 999;
: j" {2 p* i* j C5 h5 J) \ - }
" E' A5 a! B" C4 M -
! \5 S4 j0 I" B" ^ - .deng-box1 {/ v8 [4 S7 w8 N' X
- position: fixed;6 N. P. W# s1 p$ q' C
- top: -30px;
/ l& E7 w, M4 ^5 |( J! a3 C3 j - right: 10px;
$ U& L3 g0 F4 x7 L- P - z-index: 999;) L8 ^9 M- I! [. J" {+ v# h
- }
8 n$ ]# v+ L2 l - 1 P; p1 C d! f0 \/ G' A
- .deng-box1 .deng {
- R" f0 t" T# F% n/ K5 ` - position: relative;2 _/ n8 r' |& n# m) q( j- @4 k
- width: 120px;% Y+ _4 i5 `6 g" ?& N1 F, C, a* b ^
- height: 90px;2 t: R+ H2 F. @/ k
- margin: 50px;
8 A0 R+ m( A1 O3 J/ e5 O9 u/ g - background: #d8000f;; ]6 ?( j) ~+ y5 g/ O0 X# I
- background: rgba(216, 0, 15, 0.8);9 n: i$ [9 a$ j9 M; m
- border-radius: 50% 50%;6 H2 L# l3 l( O# n; d
- -webkit-transform-origin: 50% -100px;
6 U* U. E7 M% Q% ]$ e - -webkit-animation: swing 5s infinite ease-in-out;
A0 _7 d+ {6 F% S" |5 K) @- O - box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
" F- P Y: o9 H( K0 f7 n - }- }8 \0 `2 `$ x& j* [
-
- o! w! t( q, O) T/ y% c' } - .deng {
0 a+ }, Q' M+ _. F5 G! f. K - position: relative;
$ \* \0 k& [! d# \ - width: 120px;6 w6 R0 A$ s1 h4 n, W
- height: 90px;9 j! {1 v e9 ]5 w( B
- margin: 50px;" |4 h# N2 M2 z' ^+ j; G
- background: #d8000f;
# g4 l$ X8 G% l9 ^, g$ h1 _( W - background: rgba(216, 0, 15, 0.8);
/ N' P" ]9 N& E& Q. w4 W/ D% ? - border-radius: 50% 50%; L3 b$ u. R) a; X! ^
- -webkit-transform-origin: 50% -100px;
- O& E' a) B4 k* z8 m* N - -webkit-animation: swing 3s infinite ease-in-out;
/ D+ E' [& T/ p! e - box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);# x, D2 ~8 ^* i
- }- [" |3 }4 N* R' ]
- ) O V+ v H9 ?/ _
- .deng-a {6 Q) @; E0 U2 w
- width: 100px;' a. X/ U6 P8 F7 ~( l1 d, U
- height: 90px;
9 k5 h, Z3 @& s9 Y3 | - background: #d8000f;/ o' h7 u9 }# M" Q4 v
- background: rgba(216, 0, 15, 0.1);! o( t# T) W, F7 s5 h% g
- margin: 12px 8px 8px 8px;
7 W6 i7 B, n/ X* c - border-radius: 50% 50%;
7 C! j/ B, r; w - border: 2px solid #dc8f03;7 L4 P0 p4 G: T) F* x
- }
& \3 e- W Y4 G$ m; c& L1 Y - 1 X1 i0 {6 t8 }* Q1 K
- .deng-b {
! ?" u# Y* o- k! x- R& \! {0 W - width: 45px;) r m1 g a6 d- t4 B
- height: 90px;
8 N2 X3 i! D/ P0 E% W; D) N - background: #d8000f;
( t' H9 b8 C: k1 u9 l5 Y0 N, M6 B( p - background: rgba(216, 0, 15, 0.1);
, ?$ Y5 z# P( M* I/ m4 R - margin: -4px 8px 8px 26px;5 Z1 Q4 V: O3 z% t; L
- border-radius: 50% 50%;
( |1 ^2 N7 N# G - border: 2px solid #dc8f03;# f! Z+ U; D9 W1 }" r% `- n' Q
- }
: l; N+ Q% h: e. P) E' L -
. X' ?) h, U; Z1 |, ^: S! O9 W - .xian {
2 [& J+ \; v, H7 W - position: absolute;7 k9 `9 I0 r7 p. G3 T* X7 \
- top: -20px;
/ ]- J) x6 t, K - left: 60px;2 @- W! |. y7 G- V
- width: 2px;
: m( ?# R) g& u4 [. o5 m - height: 20px;6 h% {. j' |5 V j1 r( `/ s
- background: #dc8f03;; K$ E4 H/ ?! | C; G' X
- }
4 |4 G b6 L/ ` c6 C - , }: g1 Y2 h! Q* u2 L
- .shui-a {0 h5 H3 w! ~! A( c* }
- position: relative;
+ V$ ^1 c$ R/ O - width: 5px;
- T6 a# ]# X5 q8 h; }2 \/ V - height: 20px;
; L6 w! T K+ J, Z! ?6 c - margin: -5px 0 0 59px;- M# i) f) e0 o% t' i+ |* c
- -webkit-animation: swing 4s infinite ease-in-out;
9 L* u8 S# D9 d8 m4 n6 N8 ~# l - -webkit-transform-origin: 50% -45px;
4 F: K1 Q) s) v- X4 F* h2 Y - background: #ffa500;( m9 B5 [7 i3 i/ H5 t
- border-radius: 0 0 5px 5px;
H8 u% E$ L: L5 p5 Z E) P - }
4 @9 U4 p, O7 E8 V# p -
' I7 a; }9 B$ s5 D9 \$ m - .shui-b {
7 D2 E% J% B: R - position: absolute;
0 y, Y5 Y5 W# ?2 i$ N I - top: 14px;
+ A( k. @# ]/ p* h; z/ W - left: -2px;% A- F: a2 x$ s7 c4 e* x
- width: 10px;. @& C9 j M) b% @* f
- height: 10px;
/ H, g9 b3 K1 {- X - background: #dc8f03;
* C' W. x9 l# E - border-radius: 50%;
8 U/ x! m) |0 ] - }4 N& g1 {- S$ { w: Q
- 9 l. e3 P5 H* i! }1 b y
- .shui-c {
3 i* g1 C' V2 X. x' X1 L - position: absolute;0 a8 D, j8 b6 s( q0 X4 V
- top: 18px;5 o( n' a1 m6 I9 X5 Y' n4 W" f' }* K
- left: -2px;
) m/ S# a9 {' G+ C' N1 v - width: 10px;
( G2 G* U& _* s0 y/ k - height: 35px;
5 C. d" g a0 b ~% c; g* ` - background: #ffa500;
* [3 l/ Z5 L, \5 h6 m ~ - border-radius: 0 0 0 5px;% ?0 y+ |; [$ q' a% H% t/ h% G
- }
9 u0 O. M3 r5 F1 D1 _ -
3 Y& t1 J- s/ t4 z' i - .deng:before {
; o- S) f( w9 P8 x9 F - position: absolute;0 V, }6 {( I8 A' _9 Q' I
- top: -7px;
! B# h& D7 k. f) y5 V - left: 29px;
# _' [. b" D( v! h+ u - height: 12px;
& ^3 S) ~8 T& x1 x - width: 60px;
- J$ L! q3 r* B B# z, d" z - content: " ";
* }6 x9 k$ E) a$ i - display: block;
) I) ^. \3 ~+ | - z-index: 999;7 x( z- n$ Q% j, O- K
- border-radius: 5px 5px 0 0;
8 x- H* X6 H2 s9 O& F: K - border: solid 1px #dc8f03;
X6 I+ I" K, ^ - background: #ffa500;
$ D4 m8 `4 e! k- f, a3 S - background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
4 j3 b" A5 J7 l" q3 I0 I$ \ - }
# t2 ?8 ~/ X, P |% E4 p7 i; L( E - & P% H" Y, R" i# l
- .deng:after {, K( o [' V/ {$ t* }
- position: absolute;
. n- O7 D# ?; o9 H: M" |. o3 i+ w - bottom: -7px;, c: b+ q7 B& N3 A" R
- left: 10px;
# L. i+ ^( g7 k ] - height: 12px;
$ J! G$ l/ `# N9 | - width: 60px;) _% S& f$ C# Y& f3 @
- content: " ";
* Z! D& L4 J) a; f2 e4 s - display: block;
5 W& N% r( K1 P - margin-left: 20px;
4 m# }5 g6 u7 P5 U) x - border-radius: 0 0 5px 5px;8 d$ F" C: _* Y, g- Y
- border: solid 1px #dc8f03;
5 Z1 o' Y0 d" R% k2 ` - background: #ffa500;
8 i& f0 v0 o; G& W7 i0 q2 s( o - background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
' y$ |& \0 Z5 U- k4 t - }. F! o% W0 j' F% r: S3 o- Q9 Q3 J
- 8 ^+ f' M ^2 ~) K
- .deng-t {/ {& h7 h* M7 R& c
- font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;7 e& Z9 g6 f' p+ r- R: m8 H: g
- font-size: 3.2rem;
4 \- _6 H9 W2 f/ `% n - color: #dc8f03;
/ s. S4 o" q" ?9 r0 ]! \- g - font-weight: bold;
% S6 \- f8 n% N- Q, x0 h( f - line-height: 85px;. I. I2 P: P+ u( T
- text-align: center;) A8 S. M. N l6 i7 R5 K8 Z; c
- }
0 g- Y/ {$ S5 i1 m5 p5 v - " m O" C3 }. V1 w
- .night .deng-t, - }% i0 @& E% E" o& J8 C6 \3 l: Q
- .night .deng-box, ' j9 U' W4 a0 }; ?6 _# }; z
- .night .deng-box1 {. @6 d4 } y, h9 \ [- h! a( [
- background: transparent !important;4 p6 A8 N9 N! J4 {, L3 j
- }
- j i7 _: [, b) }& z5 H+ l. c -
3 [# G3 }- v Q - @-moz-keyframes swing {
% [7 `# w; s) }# d$ D( O - 0% {
% b/ I; N2 v5 V8 @ - -moz-transform: rotate(-10deg)
! F# |" t& Q. B: z: H2 a) G* H6 j - }: h# ]: W# C; G0 x& I U
- " N9 X. W" {$ L' A/ U2 W
- 50% {* d! U% L% m! Y I: M- b
- -moz-transform: rotate(10deg)
. o0 N( A$ }3 J - }9 B% U4 {; Q. E
-
: ~% J. G/ d! _. L1 q& Y - 100% {# g* [. p. N. \
- -moz-transform: rotate(-10deg)7 N$ y8 x! K6 a& N! k" c8 O
- }+ j3 S W% A; r9 X( s( C, h
- }" `6 Y! J! m( c( ? K' j! V
- * T- H- E k7 s; z8 }1 X* ^
- @-webkit-keyframes swing {2 G7 U" v6 n7 q7 U
- 0% {
# J. @/ s4 ~2 S, W# a3 h - -webkit-transform: rotate(-10deg); K- _7 [5 u% f2 U
- }
0 _! D/ f6 U4 x# ~7 v3 P0 F! T - 7 H0 N1 s% g* v6 O, V- H4 u1 Q
- 50% {
% o! j$ D9 c% P0 ?' m) v# B" } - -webkit-transform: rotate(10deg)
# j% r% `! H9 r6 L, e - }
* b4 Z' ` s% x7 U' d- z# g( \ -
& p5 l N* |! ^& Y$ \ - 100% {
. V- F5 P8 z; I* c4 n. [8 Q - -webkit-transform: rotate(-10deg)/ R# v; U7 t6 x; U/ q; u% d8 l7 |1 v2 g
- }
& J& l' N3 ?+ Y - }# Y8 r: @& d4 j
- </style>
* a. x2 J! V7 O6 h; X6 M0 o - <body># q( ?6 c& w7 W4 {
- <!-- 灯笼1 -->
$ [! Q" u& P# B+ R- C - <div class="deng-box">
; U- \ r# I, M; S- V4 v7 Q - <div class="deng">$ Y- C( b) O) @ ` ^% B: U* P- Q
- <div class="xian"></div>
b- H, @. p% o$ }; |5 ~" i - <div class="deng-a">! r4 e1 G# _2 E4 j; T
- <div class="deng-b"><div class="deng-t">庆</div></div>
; d+ S! u+ K+ M* ^' X' Q - </div>5 w5 `/ P& p2 `" Z" D
- <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>" |) S1 F# r7 p g. ~ c
- </div>
& u. F6 S% W% t) X! P - </div>
4 R$ ?& ]* h. x& [, K- C W - <!-- 灯笼2 -->
! S6 [$ ^' M; _6 q7 |1 o - <div class="deng-box1">/ [2 Y6 Y9 J) {/ y' X3 g7 z C' m
- <div class="deng">
) r, G7 w7 A G4 V% N - <div class="xian"></div>
, J( Q; a+ b% h6 {5 g5 e - <div class="deng-a">
5 N L% ?, e4 S' s! f& c - <div class="deng-b"><div class="deng-t">国</div></div>% {% D. H, f. h l' I. n
- </div>
: @1 s1 N: q9 L+ r1 O - <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
% ~1 p+ A. R- q4 c. |, m5 F - </div>) J& S+ V5 h' \ j' L' h
- </div>& v/ K7 @0 I' M" Y
- </body>
复制代码 上面是两个灯笼在摇摆(示例:www.5gbbs.top),在右边。现在要加两个在左边。该怎么加代码?
$ w) y% y( s; L2 g7 m# H- a1 S) ^* g
|