Share Code Trang Trí Website Đón Tết

1
@media (max-width: 767.98px) {
2
  .deng-box1 { transform: scale(0.5) rotate(1deg); }
3
  .deng-box2 { transform: scale(0.5) rotate(1deg); }
4
  .deng { top: -65px; }
5
}
6

7
.deng-box1 {
8
  position: fixed;
9
  top: -30px;
10
  left: 5px;
11
  z-index: 9999;
12
  pointer-events: none;
13
}
14

15
.deng-box2 {
16
  position: fixed;
17
  top: -30px;
18
  right: 5px;
19
  z-index: 9999;
20
  pointer-events: none;
21
}
22

23
.deng {
24
  position: relative;
25
  width: 120px;
26
  height: 90px;
27
  margin: 50px;
28
  background: rgba(216, 0, 15, 0.8);
29
  border-radius: 50%;
30
  transform-origin: 50% -100px;
31
  animation: swing 3s ease-in-out infinite;
32
  box-shadow: -5px 5px 50px 4px rgb(250, 108, 0);
33
}
34

35
.deng-box2 .deng {
36
  animation: swing 5s ease-in-out infinite;
37
  box-shadow: -5px 5px 30px 4px rgb(252, 144, 61);
38
}
39

40
.deng::before {
41
  position: absolute;
42
  top: -7px;
43
  left: 29px;
44
  height: 12px;
45
  width: 60px;
46
  content: " ";
47
  display: block;
48
  z-index: 999;
49
  border-radius: 5px 5px 0 0;
50
  border: 1px solid rgb(220, 143, 3);
51
  background: linear-gradient(to right, rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3));
52
}
53

54
.deng::after {
55
  position: absolute;
56
  bottom: -7px;
57
  left: 10px;
58
  height: 12px;
59
  width: 60px;
60
  content: " ";
61
  display: block;
62
  margin-left: 20px;
63
  border-radius: 0 0 5px 5px;
64
  border: 1px solid rgb(220, 143, 3);
65
  background: linear-gradient(to right, rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3));
66
}
67

68
.xian {
69
  position: absolute;
70
  top: -20px;
71
  left: 60px;
72
  width: 2px;
73
  height: 20px;
74
  background: rgb(220, 143, 3);
75
}
76

77
.deng-a {
78
  width: 100px;
79
  height: 90px;
80
  background: rgba(216, 0, 15, 0.1);
81
  margin: 12px 8px 8px 10px;
82
  border-radius: 50%;
83
  border: 2px solid rgb(220, 143, 3);
84
}
85

86
.deng-b {
87
  width: 45px;
88
  height: 90px;
89
  background: rgba(216, 0, 15, 0.1);
90
  margin: -2px 8px 8px 26px;
91
  border-radius: 50%;
92
  border: 2px solid rgb(220, 143, 3);
93
}
94

95
.deng-t {
96
  font-family: Arial, "Lucida Grande", Tahoma, sans-serif;
97
  font-size: 1.3rem;
98
  color: rgb(255, 165, 0);
99
  font-weight: bold;
100
  line-height: 42px;
101
  text-align: left;
102
  width: 25px;
103
  margin: 5px auto;
104
}
105

106
.shui-a {
107
  position: relative;
108
  width: 5px;
109
  height: 20px;
110
  margin: -5px 0 0 59px;
111
  animation: swing 4s ease-in-out infinite;
112
  transform-origin: 50% -45px;
113
  background: rgb(255, 165, 0);
114
  border-radius: 0 0 5px 5px;
115
}
116

117
.shui-c {
118
  position: absolute;
119
  top: 18px;
120
  left: -2px;
121
  width: 10px;
122
  height: 35px;
123
  background: rgb(255, 165, 0);
124
  border-radius: 0 0 0 5px;
125
}
126

127
.shui-b {
128
  position: absolute;
129
  top: 14px;
130
  left: -2px;
131
  width: 10px;
132
  height: 10px;
133
  background: rgb(220, 143, 3);
134
  border-radius: 50%;
135
}
136

137
@keyframes swing {
138
  0% { transform: rotate(-10deg); }
139
  50% { transform: rotate(10deg); }
140
  100% { transform: rotate(-10deg); }
141
}

1
<div class="deng-box1">
2
  <div class="deng">
3
    <div class="xian"></div>
4
    <div class="deng-a">
5
      <div class="deng-b"><div class="deng-t"></div></div>
6
    </div>
7
    <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
8
  </div>
9
</div>
10

11
<div class="deng-box2">
12
  <div class="deng">
13
    <div class="xian"></div>
14
    <div class="deng-a">
15
      <div class="deng-b"><div class="deng-t"></div></div>
16
    </div>
17
    <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
18
  </div>
19
</div>