- <head>! @3 g7 C8 I5 F! t0 V
- <style>
. Y/ B& w5 B" e9 n - .deng-box {/ l; Z6 z8 i8 n
- position: fixed;, {6 H$ K+ T* E1 V$ }& Q
- top: -40px;; A9 x2 E& l0 L' w- s+ Y' \: F
- right: -20px;
9 U( ^* A+ k0 n - z-index: 999;
: [3 R& i8 X, j2 Q - }
% l- S2 J! _; ` - ' z7 |5 R* ]* h- d) Y* f
- .deng-box1 {
1 M" ]: k& F1 h0 Z1 o - position: fixed;
6 Z% K. P8 d* x* q3 j - top: -30px;
4 s- g! E/ y0 `* c2 Z) H - right: 10px;
7 i3 s) B& I5 D - z-index: 999;2 K4 h9 R, C' s6 f
- }2 Q7 ~& Y) o' E% [6 w
-
* I8 w' }6 H6 x - .deng-box1 .deng {/ ]! L, j2 t' R8 j( s
- position: relative;
6 o- a B9 l: b* U2 `! j& P - width: 120px;* q: o: b: A- j9 M+ G
- height: 90px;) y* F2 b! t$ a; |& S- O' t! U) a
- margin: 50px;
8 S3 \ V# z M8 b E! L - background: #d8000f;* Z7 C1 d9 x, ^1 S) o
- background: rgba(216, 0, 15, 0.8);
m' t+ @1 v! t8 X. N2 d1 y - border-radius: 50% 50%;* g/ g* e$ h# F }
- -webkit-transform-origin: 50% -100px;
& e, _, X5 U$ Y0 B/ c, v* ? - -webkit-animation: swing 5s infinite ease-in-out;
) J( Q- Z" D } - box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
) P5 J6 ?5 s9 ^ - }
. U+ t& U. X {' R4 Y -
4 J% _6 G" t% C8 K) x. I1 k' { - .deng {
4 Z9 q' f+ j8 F - position: relative;! c6 \" r9 X" T6 F9 a
- width: 120px;
( R. d* Z1 w9 F7 Z2 h, Z' S$ s - height: 90px;
8 b7 `* R! O$ D" d s% }) \& B - margin: 50px;) K/ q* ~4 l, ~8 C# X
- background: #d8000f;. C1 w. M' e$ B a: S
- background: rgba(216, 0, 15, 0.8);4 {) W3 }, |& _1 m4 H; e
- border-radius: 50% 50%;# R+ _. M, ^+ P. \: D
- -webkit-transform-origin: 50% -100px;
" J; O. |4 W( t/ Y7 S1 z1 C- e - -webkit-animation: swing 3s infinite ease-in-out;& W0 A: u1 Y3 e# I, y0 z$ h
- box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);# I& M# Q/ n! d4 e7 M$ c
- }. s" f" h& g) g! y( d
- 9 a+ t# h) t6 _! e: T) s4 d
- .deng-a {' O2 n3 O) E. k4 T8 P% Z
- width: 100px;0 a# w, R; I# ? m* g& j4 _( x
- height: 90px;
: p6 t, H9 A6 z n) r; M9 I3 ~6 X - background: #d8000f;
) Q1 y. G7 w, Y6 w, m; i - background: rgba(216, 0, 15, 0.1);
, Z% N: a7 D) l5 @) G U - margin: 12px 8px 8px 8px;
0 M* x/ c0 x: E - border-radius: 50% 50%;
, s' f+ z7 `5 {3 s - border: 2px solid #dc8f03;
! S$ d$ R# Q" W9 N" d7 c - }
6 @8 I7 ^" w* U - / I, k% D @: p
- .deng-b {
' _$ F2 ?; @( G, b - width: 45px;! x$ |2 f+ L O& W. P, s
- height: 90px;
9 S3 j1 Y9 g+ w5 L1 V, c - background: #d8000f;
: `% `( h1 t9 B! ? - background: rgba(216, 0, 15, 0.1);) \; u- z+ ~+ f3 j. U' k
- margin: -4px 8px 8px 26px;2 w7 c' p1 l# Q* x) M' t2 n0 o
- border-radius: 50% 50%;1 J; l# p' f( G" j! S; B
- border: 2px solid #dc8f03;% }1 W1 B+ r7 G( R) v' p
- }
% Z6 G- i* p) L6 A5 N0 H$ }' s- H, b3 I - * t/ z j: J/ J+ M2 P* v9 z
- .xian {
% F ?3 q u' D, y - position: absolute;( x; o6 y8 F3 C' O
- top: -20px;
8 T& Z2 Q( O% J8 E9 x - left: 60px;
% [) J: n& S( I* C- J) V7 U - width: 2px;
* y: i7 V8 ~2 r - height: 20px;
, _9 q3 Y7 s2 F! J+ i6 G! c - background: #dc8f03;, F; `. q% ~, f4 r& W3 ?& P, B
- }
! Y8 Y: j: D7 H2 J - ; G9 M7 @, J) S( ~+ Q# A! y/ f" Z) i5 I4 u
- .shui-a {8 i% M; X6 ] z6 r" x, I
- position: relative;7 X L: F2 x9 S$ q( K- |
- width: 5px;
( H3 E" h% [" z& M) P$ L( K2 f; n - height: 20px;% {' X( u( o2 G8 x; P. ^. ^
- margin: -5px 0 0 59px;7 J: D6 j9 X( d3 K0 b, B) k
- -webkit-animation: swing 4s infinite ease-in-out;
4 T4 G. X2 D. G5 _4 f7 x - -webkit-transform-origin: 50% -45px;
/ }5 `8 {' B$ W2 q$ X6 y* o/ D; o9 b - background: #ffa500;
& N7 p4 V* v% G5 q1 d3 i/ _4 ? - border-radius: 0 0 5px 5px;7 O I- [! s7 Y( e3 V
- }
; u/ Z) ^$ S' I -
# N, ?/ V2 U3 s. R - .shui-b {
; d3 Z2 B% e% E: J) Q" D - position: absolute;! Q# O7 M. E1 h( L0 {
- top: 14px;
+ ?/ i9 w; i) G+ } | - left: -2px;- g4 E, e8 P5 k. h
- width: 10px;' P5 [6 G* C& F
- height: 10px;
* c& v" Z- O+ a - background: #dc8f03;
7 [4 M) i" M0 b* r - border-radius: 50%;
- ?7 d# T$ x/ O4 ]* @ - }( T% L B7 H) y$ U+ @; t
- : l4 i9 U( u( H. Y {) e. k
- .shui-c {" L6 F. r& @ i9 e7 X& y6 n
- position: absolute;1 ?# U& y4 c' S- J+ z9 L
- top: 18px;2 A8 Q7 j- M4 K4 |
- left: -2px;
3 X6 X C8 V8 a$ C) ~ - width: 10px;
" a$ `) ?$ }+ ?: c5 A W - height: 35px;7 E3 f' P% b2 @! I5 ~
- background: #ffa500;2 B* ?$ R5 {3 a' E6 u
- border-radius: 0 0 0 5px;& W3 ~6 p& k+ Q5 E5 s' l
- }8 I; H# r! M$ N1 m- D0 y
- 2 s: J3 D/ b- l" B) C* K! l: _& T
- .deng:before {
. D% ^( e$ e, ` - position: absolute;9 K. C' a' h5 R, g
- top: -7px;5 S8 g/ e7 C1 k) Y5 j
- left: 29px;
( E- W* W: M- W+ V0 p, K/ ] - height: 12px;
6 r$ z9 L3 Q3 x, h- N - width: 60px;* o# I @* r% M
- content: " ";
$ B# g( ] M. d5 h# ? - display: block;
" Z. }; }1 P& A( D4 @- z7 b# s$ M - z-index: 999;
# S# K8 T2 r& e8 q& B p3 | - border-radius: 5px 5px 0 0;
) P8 b( N/ `/ h$ S) z% n - border: solid 1px #dc8f03;7 A9 ]: G+ z& V, j. K& C0 z
- background: #ffa500;
* d4 R, z7 d& q' _! B+ d - background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);) q2 q) ] V6 C3 l
- }
4 L: c$ W2 _; b; f: R2 b - ; E+ l) s, s- n( m9 }) ~
- .deng:after {
# L$ w- b9 I9 S/ x/ u - position: absolute;
. q' Z0 [3 M/ j; d. |# U7 h) M - bottom: -7px;
. A2 T6 \8 d) U8 z X2 ~9 |+ e - left: 10px;4 U! J4 }7 H7 H0 b& j0 n
- height: 12px;
5 f3 y7 T" ^6 N+ N8 @3 [ - width: 60px;0 N) H6 V" O: t/ v& y4 H1 j
- content: " ";
1 V4 N. q4 G& Z$ }7 X, T - display: block;
1 e9 |) K+ I6 j) m3 b5 p& r - margin-left: 20px;3 f9 n5 K% l, i U) x: c
- border-radius: 0 0 5px 5px;
5 V9 d7 o* P0 [$ H y- o( N - border: solid 1px #dc8f03;
`- c8 w% _& {2 a7 r0 S" Q* \ - background: #ffa500;
X4 G/ \) n. K+ h - background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
) h7 e0 ?) I/ a7 j3 J - }3 C/ a1 V S. J( F5 `' d- l
- # H; G7 x0 D D0 r3 O, Z
- .deng-t {: | `8 m {( S
- font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;1 B$ l7 f# g: x( r4 N" R
- font-size: 3.2rem;
+ y) `1 u3 A- M6 J. N0 l4 A - color: #dc8f03;) E J8 b4 l, `9 x/ ], ^9 T: M2 S
- font-weight: bold;2 h7 y% j2 I) g+ d$ q. c
- line-height: 85px;
+ p3 n0 x9 I" ] - text-align: center;
' D. ]8 f. Q6 C7 X8 K - }) M) E4 @ q2 R% `+ h8 D; b4 b' _
- 5 R0 q0 i& D# x9 i5 M$ j
- .night .deng-t,
2 @. `9 w/ L% n; g- p7 x - .night .deng-box, 4 c9 @ T! Z) x
- .night .deng-box1 {8 {( Z, o3 o3 Q
- background: transparent !important;
* A5 C H4 L/ C9 l: x K - }1 T- d! M4 [" I1 }
-
/ I. I* b8 M& ^ L8 j. K4 D5 M$ G - @-moz-keyframes swing {
. R6 x: ~" V: s* g! i- Z' l - 0% {% O6 C9 ^5 \7 x8 o Y# O
- -moz-transform: rotate(-10deg)
8 y$ w! I" `' r% L) w1 U6 o - }5 D+ _2 |, S9 H& Q
-
1 U* R" s+ ]- K& S0 o* { - 50% {
3 O: p/ S. ~7 J B# K+ @; y$ @6 R$ ~ - -moz-transform: rotate(10deg)
/ F2 h/ A) H, s9 {7 D - }
& s& @$ C1 g& R9 V+ y. z - " y z: S( f+ b4 Q
- 100% {
0 B8 U4 M" o. w; J0 C. W# m; R; Y - -moz-transform: rotate(-10deg)
+ ^1 `/ p" X6 f0 o5 Z* w - }
1 F( P& Q3 V% x7 k4 o0 c - }2 x3 |6 D! Y: i, g* f% t
-
" R% @6 L3 O1 }& U$ @ - @-webkit-keyframes swing {; _8 i/ g1 q- o% N
- 0% {
$ y' ~) a' N. f% @- _, i4 @. G - -webkit-transform: rotate(-10deg)
9 p: t8 a3 |" H& P h - }2 W6 C. P n# j- _! n
-
. `4 x9 R* f1 m. _$ a" |9 B - 50% {
X* c3 V" q0 q- a; g9 v - -webkit-transform: rotate(10deg)7 |3 x" r- i! W8 Q' _, @
- }/ ?; i- w& l% L- G" p
- 3 ^, Z* o* n, f: }
- 100% {
' K" J2 x: y+ s5 w - -webkit-transform: rotate(-10deg)' h/ G/ h# j: r5 R" S$ r) C
- }
( u* h) a/ i/ ~5 \! g9 X9 K - }! r9 N0 N# F0 `0 r2 M+ a
- </style>
$ j, M- U6 x% F1 { - <body>
, z( }% j' W" t' _5 e8 b - <!-- 灯笼1 -->
8 j g$ Z) r1 ^ - <div class="deng-box">, q& H9 w, d+ W' U7 d( }
- <div class="deng">3 C3 K& c M$ ~' h5 X, T5 N' Y( m
- <div class="xian"></div>
1 T0 T2 S. y0 }: u - <div class="deng-a">" V1 Q6 ^( T- M: z2 t
- <div class="deng-b"><div class="deng-t">庆</div></div>
" w6 I3 R7 F; ]) K9 K - </div>
: h0 ~7 o' X% L. [. X- d - <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>4 T2 s) q1 m, p" c2 b+ ~
- </div>9 \+ \2 E( _* U/ A* u# i F9 _5 Y
- </div>
- D: E) g$ J" b' k4 M1 }1 V6 D - <!-- 灯笼2 -->6 G# p! x H8 u& W9 L' R7 z$ |9 Z
- <div class="deng-box1">
" j0 d0 D/ K7 d8 Z4 ?( P& Y4 x - <div class="deng">
! R2 w# J4 ?/ ]3 B - <div class="xian"></div>
$ [( y t6 Z. {8 i6 z0 \$ L - <div class="deng-a">( l/ N4 ~8 |/ x2 V R) U
- <div class="deng-b"><div class="deng-t">国</div></div>
" f- |& j- D% L" N, d9 [' Z% X - </div>
& V+ D% J Z, d- k% H - <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>& t! P3 _6 p' f+ X3 ?
- </div>
) i t4 C5 ~" q. d( K5 V - </div>
7 O/ O) }6 k* _/ J - </body>
复制代码 上面是两个灯笼在摇摆(示例:www.5gbbs.top),在右边。现在要加两个在左边。该怎么加代码?
) L# C$ n A+ l& D* Y9 b7 W$ ~
) o" _. T7 f/ W& c. ^ |