<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生日快乐!</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Concert+One|Pacifico");
.mobile {
position: fixed;
text-align: center;
width: 100%;
top: 50px;
font-size: 90px;
display: block;
}
h1, h2, h3, span {
display: none;
}
@media screen and (min-width: 670px) {
.mobile {
display: none;
}
h1, h2, h3, span {
display: block;
}
body {
background: linear-gradient(to right, #e2b8f7, #d4bafa, #c7bcfb, #b9befb, #acbff9);
cursor: crosshair;
perspective: 1000px;
transform-style: preserve-3d;
font-family: "Pacifico", cursive;
}
h1 {
position: fixed;
text-align: center;
width: 100%;
top: 120px;
font-size: 90px;
background: -webkit-linear-gradient(0deg, #ceadfc 0%, #a3bbfb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Concert One', cursive;
font-weight: 400;
z-index: -1;
letter-spacing: 6px;
}
span {
position: fixed;
text-align: center;
width: 100%;
top: 70px;
font-size: 70px;
}
h3 {
position: fixed;
text-align: center;
width: 100%;
top: 80px;
font-size: 80px;
background: -webkit-linear-gradient(90deg, #e9e6ff 0%, white 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
bokeh {
position: fixed;
width: 2vmin;
height: 2vmin;
border-radius: 50%;
animation-name: explosion;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
}
bokeh:nth-child(1) {
background-color: #2bd8ff;
transform: translate(70.7404476506vw, 39.2982912115vh);
animation-duration: 2.451477853s;
animation-delay: -3.9090695973s;
}
bokeh:nth-child(2) {
background-color: #feff28;
transform: translate(21.390916309vw, 83.9320950239vh);
animation-duration: 2.6082661613s;
animation-delay: -2.4177632704s;
}
bokeh:nth-child(3) {
background-color: #feff28;
transform: translate(99.4707896083vw, 50.8779038063vh);
animation-duration: 2.3934609219s;
animation-delay: -4.9374235187s;
}
bokeh:nth-child(4) {
background-color: #ef8d22;
transform: translate(88.0762428158vw, 60.8758646268vh);
animation-duration: 4.3745762554s;
animation-delay: -4.2335574629s;
}
bokeh:nth-child(5) {
background-color: #feff28;
transform: translate(87.209776097vw, 87.4722435411vh);
animation-duration: 2.6247180243s;
animation-delay: -0.3571633852s;
}
bokeh:nth-child(6) {
background-color: #feff28;
transform: translate(67.5348277973vw, 93.8934516001vh);
animation-duration: 3.0630744908s;
animation-delay: -4.4890304964s;
}
bokeh:nth-child(7) {
background-color: #feff28;
transform: translate(51.2278043561vw, 39.0030857051vh);
animation-duration: 3.1065374294s;
animation-delay: -4.5619134997s;
}
bokeh:nth-child(8) {
background-color: #fc85e1;
transform: translate(63.2547804674vw, 88.7449965817vh);
animation-duration: 2.8384921355s;
animation-delay: -0.0965491775s;
}
bokeh:nth-child(9) {
background-color: #fc85e1;
transform: translate(1.7747115187vw, 78.6520215079vh);
animation-duration: 4.3100039072s;
animation-delay: -0.553894004s;
}
bokeh:nth-child(10) {
background-color: #ef8d22;
transform: translate(61.1915375825vw, 46.9592056036vh);
animation-duration: 2.6244512022s;
animation-delay: -4.5897035553s;
}
bokeh:nth-child(11) {
background-color: #ef8d22;
transform: translate(4.3118502657vw, 31.3689335931vh);
animation-duration: 2.9020870937s;
animation-delay: -0.0475365525s;
}
bokeh:nth-child(12) {
background-color: #fc85e1;
transform: translate(11.7124176675vw, 39.3853134156vh);
animation-duration: 2.7165067308s;
animation-delay: -0.3402677425s;
}
bokeh:nth-child(13) {
background-color: #fc85e1;
transform: translate(94.2835231134vw, 15.247368654vh);
animation-duration: 3.1761028617s;
animation-delay: -4.3999397039s;
}
bokeh:nth-child(14) {
background-color: #ef8d22;
transform: translate(22.7721270307vw, 68.9730094645vh);
animation-duration: 3.6217481701s;
animation-delay: -4.3121585024s;
}
bokeh:nth-child(15) {
background-color: #2bd8ff;
transform: translate(82.1182207545vw, 11.2392421851vh);
animation-duration: 3.4960993434s;
animation-delay: -3.7739573258s;
}
bokeh:nth-child(16) {
background-color: #2bd8ff;
transform: translate(19.7968006723vw, 77.2717558727vh);
animation-duration: 3.1354637591s;
animation-delay: -2.8370634184s;
}
bokeh:nth-child(17) {
background-color: #feff28;
transform: translate(84.4109063964vw, 23.5168492096vh);
animation-duration: 4.3723964886s;
animation-delay: -1.7390935649s;
}
bokeh:nth-child(18) {
background-color: #fc85e1;
transform: translate(72.7671083205vw, 62.5592027903vh);
animation-duration: 4.4313534479s;
animation-delay: -3.0082038529s;
}
bokeh:nth-child(19) {
background-color: #2bd8ff;
transform: translate(79.3141365436vw, 1.3143345978vh);
animation-duration: 2.392781523s;
animation-delay: -0.261672225s;
}
bokeh:nth-child(20) {
background-color: #ef8d22;
transform: translate(29.2041570725vw, 86.8219678576vh);
animation-duration: 3.7180833613s;
animation-delay: -1.7317238209s;
}
bokeh:nth-child(21) {
background-color: #2bd8ff;
html生日祝福特效代码
需积分: 1 2 浏览量
2024-02-28
15:56:41
上传
评论
收藏 1006KB ZIP 举报
shengri.zip （3个子文件） 
file 
happy.mp3 938KB image 
shouxing.png 70KB
index.html 50KB资源评论
java_强哥
- 粉丝: 531
- 资源: 34
