过年给网站加一对灯笼CSS代码

执刀人的工具库

于 2023-06-03 07:40:10 发布

阅读量149

点赞数

分类专栏：技术文章文章标签： css html 前端

本文链接：https://blog.csdn.net/winkexin/article/details/131017212

版权

技术文章专栏收录该内容

355 篇文章 13 订阅

订阅专栏

马上快过年了，给网站加一对红灯笼，这样才有过年的喜庆劲儿。灯笼是代码生成的无需图片，而且还会摆动。

使用方法

把HTML下面代码粘贴到网页BODY内任意位子都可以。灯笼的位子可以微调.deng-box的left和right数值。

CSS代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

<div class="deng-box2">

<div class="deng">

<div class="xian">

</div>

<div class="deng-a">

<div class="deng-b">

<div class="deng-t">年</div>

</div>

<div class="shui shui-a">

<div class="shui-c">

</div>

<div class="shui-b"></div>

</div>

<div class="deng-box3">

<div class="deng">

<div class="xian">

</div>

<div class="deng-a">

<div class="deng-b">

<div class="deng-t">新</div>

</div>

<div class="shui shui-a">

<div class="shui-c"></div>

<div class="shui-b">

</div>

<div class="deng-box1">

<div class="deng">

<div class="xian">

</div>

<div class="deng-a">

<div class="deng-b">

<div class="deng-t">乐</div>

</div>

<div class="shui shui-a">

<div class="shui-c"></div>

<div class="shui-b"></div>

</div>

<div class="deng-box">

<div class="deng">

<div class="xian">

</div>

<div class="deng-a">

<div class="deng-b">

<div class="deng-t">快</div>

</div>

<div class="shui shui-a">

<div class="shui-c">

</div>

<div class="shui-b"></div>

</div>

<style type="text/css">

.deng-box {

position: fixed;

top: -40px;

right: 150px;

z-index: 9999;

pointer-events: none;

}

.deng-box1 {

position: fixed;

top: -30px;

right: 10px;

z-index: 9999;

pointer-events: none

}

.deng-box2 {

position: fixed;

top: -40px;

left: 150px;

z-index: 9999;

pointer-events: none

}

.deng-box3 {

position: fixed;

top: -30px;

left: 10px;

z-index: 9999;

pointer-events: none

}

.deng-box1 .deng,

.deng-box3 .deng {

position: relative;

width: 120px;

height: 90px;

margin: 50px;

background: #d8000f;

background: rgba(216, 0, 15, .8);

border-radius: 50% 50%;

-webkit-transform-origin: 50% -100px;

-webkit-animation: swing 5s infinite ease-in-out;

box-shadow: -5px 5px 30px 4px #fc903d

}

.deng {

position: relative;

width: 120px;

height: 90px;

margin: 50px;

background: #d8000f;

background: rgba(216, 0, 15, .8);

border-radius: 50% 50%;

-webkit-transform-origin: 50% -100px;

-webkit-animation: swing 3s infinite ease-in-out;

box-shadow: -5px 5px 50px 4px #fa6c00

}

.deng-a {

width: 100px;

height: 90px;

background: #d8000f;

background: rgba(216, 0, 15, .1);

margin: 12px 8px 8px 8px;

border-radius: 50% 50%;

border: 2px solid #dc8f03

}

.deng-b {

width: 45px;

height: 90px;

background: #d8000f;

background: rgba(216, 0, 15, .1);

margin: -4px 8px 8px 26px;

border-radius: 50% 50%;

border: 2px solid #dc8f03

}

.xian {

position: absolute;

top: -20px;

left: 60px;

width: 2px;

height: 20px;

background: #dc8f03

}

.shui-a {

position: relative;

width: 5px;

height: 20px;

margin: -5px 0 0 59px;

-webkit-animation: swing 4s infinite ease-in-out;

-webkit-transform-origin: 50% -45px;

background: orange;

border-radius: 0 0 5px 5px

}

.shui-b {

position: absolute;

top: 14px;

left: -2px;

width: 10px;

height: 10px;

background: #dc8f03;

border-radius: 50%

}

.shui-c {

position: absolute;

top: 18px;

left: -2px;

width: 10px;

height: 35px;

background: orange;

border-radius: 0 0 0 5px

}

.deng:before {

position: absolute;

top: -7px;

left: 29px;

height: 12px;

width: 60px;

content: " ";

display: block;

z-index: 999;

border-radius: 5px 5px 0 0;

border: solid 1px #dc8f03;

background: orange;

background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)

}

.deng:after {

position: absolute;

bottom: -7px;

left: 10px;

height: 12px;

width: 60px;

content: " ";

display: block;

margin-left: 20px;

border-radius: 0 0 5px 5px;

border: solid 1px #dc8f03;

background: orange;

background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)

}

.deng-t {

font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;

font-size: 3.2rem;

color: #dc8f03;

font-weight: 700;

line-height: 85px;

text-align: center

}

.night .deng-box,

.night .deng-box1,

.night .deng-t {

background: 0 0 !important

}

@-moz-keyframes swing {

0% {

-moz-transform: rotate(-10deg)

}

50% {

-moz-transform: rotate(10deg)

}

100% {

-moz-transform: rotate(-10deg)

}

@-webkit-keyframes swing {

0% {

-webkit-transform: rotate(-10deg)

}

50% {

-webkit-transform: rotate(10deg)

}

100% {

-webkit-transform: rotate(-10deg)

}

</style>

执刀人的工具库

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
过年给网站加一对灯笼CSS代码

马上快过年了，给网站加一对红灯笼，这样才有过年的喜庆劲儿。灯笼是的无需图片，而且还会摆动。
复制链接

扫一扫

专栏目录

过年给网站加一对灯笼CSS代码

使用方法

CSS代码

“相关推荐”对你有帮助么？