- <head>4 [% |6 t, l( {( n
- <style>
. G9 P+ n9 H( c - .deng-box {
4 j* E) Y3 p: Q7 P% c* U7 Y - position: fixed;2 \/ c& l0 u4 X# _& w& T
- top: -40px;
9 `3 G( y5 r2 C; g0 P- t - right: -20px;9 z0 U0 _+ k6 \" L& O
- z-index: 999;
3 j; Y) z, D8 u% P$ } - }3 J1 v$ s: m( L/ t; E
- # j2 C; y4 X% H3 I4 Z
- .deng-box1 {* {' L+ w5 h0 I% m$ Y& }5 E3 W; r
- position: fixed;$ a% {$ c4 W' ^& B5 W; h
- top: -30px;
$ x! [/ h, p6 ^ - right: 10px;3 C* M# D! s$ ?: j* q! G
- z-index: 999;
5 d/ n9 Y0 @! p0 B6 U7 I - }
3 G+ |) d! F" H8 V -
+ \7 v1 |9 |9 A( c! A7 g* d2 X - .deng-box1 .deng {
' a3 }# K1 q$ L t1 | - position: relative;; M; w4 K7 c5 [! Y; F( r
- width: 120px;
' I% {$ c9 x" q - height: 90px; b) i1 I# g; B( w6 ?
- margin: 50px;
& `7 g* G& ?& F4 n8 O: M5 Y+ ` - background: #d8000f;% K) _+ F0 ]" K. x
- background: rgba(216, 0, 15, 0.8);; `% u) I, r/ w+ k5 n4 V, o1 E
- border-radius: 50% 50%;; H7 a! `" z& ?" L* f/ \+ `5 z
- -webkit-transform-origin: 50% -100px;
& A' q! Q4 j% F - -webkit-animation: swing 5s infinite ease-in-out;5 z" U% n- w5 Q9 T, B1 ~6 H: h0 W
- box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
& A- |4 r, L/ w" \2 x. r3 \ - }
" E; E. n9 K) l X" w) ` - 0 y" |0 m" H5 w
- .deng {
5 f3 Q1 s/ ` ]- J; v* R, ~( U8 U - position: relative;
8 t+ O* D/ r& h) } - width: 120px;
; ~5 W6 V0 |, p# F8 ` - height: 90px;
6 o6 a" j1 ? H% l$ _7 V) f' {( w - margin: 50px;
. h H1 L ]( V5 e$ e' g; k) U - background: #d8000f;
; {# a8 [" _5 i/ K - background: rgba(216, 0, 15, 0.8);. s3 g) V" ~' r, {
- border-radius: 50% 50%;3 V: d0 M9 v! A' l; ?5 F* t
- -webkit-transform-origin: 50% -100px;
- ^0 ?4 x; @5 B0 x1 `8 m& w - -webkit-animation: swing 3s infinite ease-in-out;1 K, c9 T# O% J1 Z, H
- box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
( b& D: ]3 ]$ W8 A% M" P - }
/ s" o3 \4 a; t ]( d* _5 n -
; ~7 [. W' u" e) I. g - .deng-a {
: F- r' i p' ^/ a2 x6 G8 y9 | - width: 100px;
- d: d3 o5 O, z! ^7 b - height: 90px;6 S( W+ P2 w7 M3 t
- background: #d8000f;8 @6 ^& ]. f. W( O' x. m5 |4 A
- background: rgba(216, 0, 15, 0.1);- w9 D$ H% W4 k- }
- margin: 12px 8px 8px 8px;- p/ F# W) P5 d! I+ e
- border-radius: 50% 50%;. H. J$ i# g9 q, G9 R
- border: 2px solid #dc8f03;" x0 Z1 H' T0 W4 b! u4 |, I
- }
3 X. _: W5 C/ l8 q -
% ^) {0 f' e. D, U - .deng-b {5 P6 I, L- e. Q+ l1 I# z( E# ]. r
- width: 45px;
( k1 p. D8 ~$ P9 ?# y! _9 K - height: 90px;8 ]8 ]0 P7 \% d% V; w& U$ a3 s1 r
- background: #d8000f;6 Y) \. w4 K/ b
- background: rgba(216, 0, 15, 0.1);
0 w; Y* u% R( m9 u - margin: -4px 8px 8px 26px;
6 B* e3 u% W! Q1 [# E - border-radius: 50% 50%;
I; a, I) z$ `4 [, ` - border: 2px solid #dc8f03;
8 W5 I/ t4 {8 @$ M - }/ i' O6 h, F% ~
-
7 `' h. G" u8 K - .xian {8 L" A$ n0 M3 V! k6 ~7 W. r
- position: absolute;0 n E2 ?1 X' d0 I* r9 P( j/ ^* M! j0 B
- top: -20px;1 h2 u. B- o, F k8 x
- left: 60px;
. p- e) q& S" I - width: 2px;
- p: a- `1 P) b: B3 c, Z0 o - height: 20px;
. D F% W9 Z# M& k - background: #dc8f03;& j/ ]8 f+ x9 b& T2 q: h6 @
- }
: O% b3 N$ f; X: m/ e -
/ w! ~. ~5 F$ `) _6 w( v% w( L- J - .shui-a {3 r" {3 U+ j: ?, H$ Y
- position: relative;
0 z5 O* u0 I) t- y% j - width: 5px;
8 h; p9 d* a, [# _# C - height: 20px;, F6 T+ K, \2 ]* u* N! T
- margin: -5px 0 0 59px;! g ?! a) m/ S9 g( M
- -webkit-animation: swing 4s infinite ease-in-out;: F+ b8 N) C+ j- ~: M8 s
- -webkit-transform-origin: 50% -45px;6 c, b+ G# P" |5 q' `2 z
- background: #ffa500;
5 |! e, z8 ?1 _, `- z - border-radius: 0 0 5px 5px;* S8 l$ S' p; E
- }
, |, R6 X4 B/ V7 ` - 4 I$ B6 V1 f# [* G
- .shui-b {2 U! M; O; D) |6 k
- position: absolute;- c, ?: X( i' p$ r8 s! t3 ?
- top: 14px;3 p" X# P/ C9 Z9 ]1 [* ]3 M
- left: -2px; N! x% Y- J* Y1 A
- width: 10px;6 ^; @' z: t9 ]
- height: 10px;; P2 ^, |- U7 {* I
- background: #dc8f03;
: y0 {; h7 `/ e! J- J3 o: t* r - border-radius: 50%;
! i5 ?0 E7 r* ^8 G# s - }
" E' {2 n' Z7 @4 ?" @% J" O3 N& ] - 6 ]* V* C6 y$ Q
- .shui-c {
, \! F# y7 \- L* L% m4 p - position: absolute;# h$ f" e" {& J+ N& u* b
- top: 18px;
4 t/ b, y- j# y' B/ I, B - left: -2px; u, I' {* V8 z: Q u# g
- width: 10px;
+ X0 p) N- `# C, F2 W& s - height: 35px;4 R+ G- R( q. S r2 X- V3 W" s. {5 f
- background: #ffa500;
8 o- J% |9 A' X9 v& d7 x z* K8 u - border-radius: 0 0 0 5px;
" F0 A' ]7 V( i' t - }
! D6 m" b, E2 \8 ]& q! ]; b% q -
' m! N8 }& V- V* G) R& m: Q - .deng:before {7 q0 T7 y0 W$ y o" b% t5 V
- position: absolute;
6 k" k: O- F% X+ ` @" G, f+ e, I - top: -7px;
- r& {' a, x& n- x. j- y& q - left: 29px;: y3 C( g7 |% n4 d
- height: 12px;
! f0 q; V" ?3 o4 `; y: F5 w) H, x7 Q% } - width: 60px;: s/ L7 |8 }* i) k0 x& P
- content: " ";
0 i) d& ?) {' d' ]6 D9 r* r9 k/ \- e - display: block;
0 s( ` Q1 Q+ w- N5 ~. p& E( x - z-index: 999;; y, X# h* M3 b/ J1 C5 d
- border-radius: 5px 5px 0 0;) v( t4 G D7 @$ G
- border: solid 1px #dc8f03;. y$ O3 S) p3 |
- background: #ffa500;
" E& X& k* D8 y6 c' B9 U. [' ] - background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
7 p2 c/ }% |) X' r+ U - }0 A* g* g& O2 l, c# c; k
-
& p/ H' v+ H( r) g+ u: o8 R - .deng:after {
3 U% e& S7 T# A, c1 \* K% T3 i3 O X - position: absolute;
4 a2 ^5 N2 D9 ]( C' ^: r - bottom: -7px;6 s$ A( W- X$ E9 {' f1 O! O# y
- left: 10px;
/ Q( v" a/ x1 N9 m' | - height: 12px;
. \" M, H' u) ]( y# E - width: 60px;
2 C+ N7 J2 W" q8 _* @ - content: " ";9 O' s P, q( d" `8 Z: j0 I
- display: block;
* B( s6 x. K0 g$ X - margin-left: 20px;
4 \. F4 e! W* @4 ], t) X6 k: _ - border-radius: 0 0 5px 5px;
8 V0 w" {1 K7 i - border: solid 1px #dc8f03;4 f3 y g: |; U; h: P) J5 w
- background: #ffa500;; g' \" N2 E) N/ r2 E0 K3 J' [
- background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
/ E- G3 u( Y+ C5 P* c4 f, k - }
" r5 w4 C3 F' j' u: F/ j6 f -
6 s) e$ g$ C8 I' l% w9 z, k - .deng-t {* m# X+ D# O* O# }+ G
- font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
6 c6 V5 U! R- ^7 x! n# j - font-size: 3.2rem;9 b+ U& s, J+ J& m7 t% |2 r5 Y
- color: #dc8f03;# ^( T. b7 O" i. p
- font-weight: bold;
2 _" R$ o7 Q8 ?, n5 e0 h$ ^( x - line-height: 85px;
" e; Z2 E7 _+ g7 T0 ]2 |& _* E - text-align: center;
- k. t' c; g& y - }& s7 \& A, J4 _9 E1 @
- ! `! t6 p. g' L
- .night .deng-t,
! A4 {" o! v4 f: S, w7 I0 F - .night .deng-box,
; P% O* V ?' g+ L# G4 r" W - .night .deng-box1 {
! o! W+ I5 S- C8 _0 L9 S/ X! K - background: transparent !important;
3 m: M% j3 o% V ` U - }
6 q, ~ M/ K: Q8 O3 A ?2 M - 1 ?/ z% c% ^" W2 Y W
- @-moz-keyframes swing {1 n+ c+ u' p" Y; ^
- 0% {' x# w3 I8 `0 }, m! x9 d I/ e
- -moz-transform: rotate(-10deg)
+ l7 p1 N, }+ J - }
5 d/ f8 w5 [4 I - ) r/ j4 S0 f9 l& h$ d6 t
- 50% {
1 l7 U% U/ E' |9 j/ D% ^& I( | - -moz-transform: rotate(10deg)+ h% U- Z7 k: |# u0 m8 o
- }" w( L9 B5 g [/ L* T0 w
- & Q" }0 G' @: J; w* ?
- 100% {
* g% t) k+ P% a; M0 R% A$ d - -moz-transform: rotate(-10deg)0 c8 {; t9 q% o: j$ b( v! Z
- }
6 d7 B. t- ^. t" z& {! r! N' a, S - }! Z, f1 j x3 h, R9 q B( S/ p
- 5 h4 [, X; K% b7 G2 E6 t
- @-webkit-keyframes swing {; F/ ^2 V# m2 L+ }( T: J6 N6 v
- 0% {
4 b) n& L- e+ N1 I( l3 ]- T - -webkit-transform: rotate(-10deg)! P( C0 H" |9 j/ q6 C, b; o
- }7 W* g, @% V+ e7 l
-
6 R* }$ V2 k4 O3 V$ l - 50% {# U9 _: Z, H( f! |
- -webkit-transform: rotate(10deg)
# ]7 v% R8 @' N' K7 ~1 m: V - }
( y0 [2 P3 H5 ` -
+ F7 q' b* Y$ a# v& l# Y! ? - 100% {
% S7 c( ?- }# A- w1 E1 g - -webkit-transform: rotate(-10deg)
$ [) }. @% e0 e/ U - }
7 f8 v2 }4 Z% J D2 ^/ G - }
( D8 U( m" w( g% k - </style>
1 D! }# P3 x% H! X# s0 t - <body>& J# G* U. E: |, O c1 d/ V. w; `
- <!-- 灯笼1 -->
. X( x* z( F6 ~3 `* `4 d0 | - <div class="deng-box">* E8 K% c) y9 R8 [% Y, b; U
- <div class="deng">
' T' i' T; g, }" D9 Q+ W - <div class="xian"></div>( r/ o- x/ B$ \ X# T h3 c
- <div class="deng-a">+ s4 c, @' o3 A- F0 y W
- <div class="deng-b"><div class="deng-t">庆</div></div>
' j: l. c7 X q: r0 k - </div>
1 |+ w% [' ^* W4 o# B - <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
8 I" `+ Y/ p! @! l2 I2 K - </div>( n! @1 f4 c- Y" R% u9 Z* w
- </div>0 j: M6 N/ W+ k f) w
- <!-- 灯笼2 -->
( @* Q+ N0 c/ w" b3 N - <div class="deng-box1">
/ T5 A9 A9 i: N6 F, Y% _7 Y( | - <div class="deng">3 o+ E- ~* @( ~ c3 i: @
- <div class="xian"></div>8 F# ?9 [% K, }
- <div class="deng-a">
! B! s) V2 h& I' Y - <div class="deng-b"><div class="deng-t">国</div></div>
$ W' e/ L3 ^4 f+ c; x - </div>8 e, i2 [: w! }6 O# y
- <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>+ F7 c1 j/ l" i/ @- d, B X
- </div>
8 [4 `+ {# R3 G- x/ `$ R - </div>
7 G1 U& i5 p ]6 b- O9 S- W% L - </body>
复制代码 上面是两个灯笼在摇摆(示例:www.5gbbs.top),在右边。现在要加两个在左边。该怎么加代码?% ]* r% h$ `2 m0 [& {# o- @
/ P7 |2 N8 o# }: ~ |