生日快乐(荣耀V20)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Birthdaytitle>
<style>
#bottom1 {
background: red;
border: 1px red solid;
border-radius: 10px;
position: absolute;
/*left: 280px;*/
/*top: 680px;*/
left: 50px;
top: 890px;
width: 10px;
height: 10px;
}
#bottom2 {
display: none;
background: white;
border: 1px white solid;
border-radius: 10px;
position: absolute;
/*left: 380px;*/
/*top: 650px;*/
left: 100px;
top: 865px;
width: 10px;
height: 10px;
}
#bottom3 {
display: none;
background: #FFFF00;
border: 1px #FFFF00 solid;
border-radius: 10px;
position: absolute;
/*left: 480px;*/
/*top: 620px;*/
left: 150px;
top: 840px;
width: 10px;
height: 10px;
}
#border1 {
position: absolute;
left: 200px;
top: 710px;
border-radius: 5px;
width: 250px;
height: 120px;
}
#border2 {
position: absolute;
left: 200px;
top: 750px;
border-radius: 5px;
width: 250px;
height: 80px;
}
#border3 {
position: absolute;
left: 200px;
top: 790px;
border-radius: 5px;
width: 250px;
height: 40px;
}
#rectDiv1 {
display: none;
position: absolute;
background: #FFFF00;
left: 200px;
top: 820px;
border: 1px #FFFF00 solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#rectDiv2 {
display: none;
position: absolute;
background: #FFFF00;
left: 440px;
bottom: 415px;
border: 1px #FFFF00 solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#rectDiv3 {
display: none;
position: absolute;
background: #FFFF00;
right: 188px;
top: 710px;
border: 1px #FFFF00 solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#rectDiv4 {
display: none;
position: absolute;
background: #FFFF00;
left: 200px;
top: 710px;
border: 1px #FFFF00 solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#candle1 {
display: none;
position: absolute;
left: 245px;
bottom: 530px;
background: red;
border: 1px red solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#candle2 {
display: none;
position: absolute;
left: 275px;
bottom: 530px;
background: red;
border: 1px red solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#candle3 {
display: none;
position: absolute;
left: 305px;
bottom: 530px;
background: red;
border: 1px red solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#candle4 {
display: none;
position: absolute;
left: 335px;
bottom: 530px;
background: red;
border: 1px red solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#candle5 {
display: none;
position: absolute;
left: 365px;
bottom: 530px;
background: red;
border: 1px red solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
#candle6 {
display: none;
position: absolute;
left: 395px;
bottom: 530px;
background: red;
border: 1px red solid;
border-radius: 5px;
width: 10px;
height: 10px;
}
.flake1 {
color: darkorange;
}
.flake2 {
color: #99CCFF;
}
.flake3 {
color: white;
}
.flake4 {
color: rebeccapurple;
}
.flake5 {
color: #FFFF00;
}
.first {
display: none;
position: absolute;
left: 125px;
top: 475px;
width: 6px;
height: 75px;
background-color: currentColor;
border-radius: 5px;
transform-origin: bottom;
transform: rotate(calc((var(--n) - 1) * 45deg));
}
.second {
display: none;
position: absolute;
left: 10px;
top: 150px;
width: 5px;
height: 50px;
background-color: currentColor;
border-radius: 5px;
transform-origin: bottom;
transform: rotate(calc((var(--n) - 1) * 45deg));
}
.third {
display: none;
position: absolute;
left: 400px;
top: 300px;
width: 6px;
height: 60px;
background-color: currentColor;
border-radius: 5px;
transform-origin: bottom;
transform: rotate(calc((var(--n) - 1) * 45deg));
}
.fourth {
display: none;
position: absolute;
right: 40px;
top: 200px;
width: 6px;
height: 40px;
background-color: currentColor;
border-radius: 5px;
transform-origin: bottom;
transform: rotate(calc((var(--n) - 1) * 45deg));
}
.fifth {
display: none;
position: absolute;
right: 60px;
top: 600px;
width: 6px;
height: 60px;
background-color: currentColor;
border-radius: 5px;
transform-origin: bottom;
transform: rotate(calc((var(--n) - 1) * 45deg));
}
div:nth-child(1) {
--n: 1;
}
div:nth-child(2) {
--n: 2;
}
div:nth-child(3) {
--n: 3;
}
div:nth-child(4) {
--n: 4;
}
div:nth-child(5) {
--n: 5;
}
div:nth-child(6) {
--n: 6;
}
div:nth-child(7) {
--n: 7;
}
div:nth-child(8) {
--n: 8;
}
style>
<script>
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/640;
document.write('+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('');
}
}else{
document.write('');
}
script>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">script>
head>
<body style="background: lightpink">
<div id="border1">div>
<div id="border2">div>
<div id="border3">div>
<div id="rectDiv1">div>
<div id="rectDiv2">div>
<div id="rectDiv3">div>
<div id="rectDiv4">div>
<div id="bottom3">div>
<div id="bottom2">div>
<div id="bottom1">div>
<div id="candle1">div>
<div id="candle2">div>
<div id="candle3">div>
<div id="candle4">div>
<div id="candle5">div>
<div id="candle6">div>
<figure class="flake1">
<div id="flower3" class="first">div>
<div id="flower2" class="first">div>
<div id="flower1" class="first">div>
<div id="flower8" class="first">div>
<div id="flower7" class="first">div>
<div id="flower6" class="first">div>
<div id="flower5" class="first">div>
<div id="flower4" class="first">div>
figure>
<figure class="flake2">
<div id="flower23" class="second" >div>
<div id="flower22" class="second" >div>
<div id="flower21" class="second" >div>
<div id="flower28" class="second" >div>
<div id="flower27" class="second" >div>
<div id="flower26" class="second" >div>
<div id="flower25" class="second" >div>
<div id="flower24" class="second" >div>
figure>
<figure class="flake3">
<div id="flower33" class="third" >div>
<div id="flower32" class="third" >div>
<div id="flower31" class="third" >div>
<div id="flower38" class="third" >div>
<div id="flower37" class="third" >div>
<div id="flower36" class="third" >div>
<div id="flower35" class="third" >div>
<div id="flower34" class="third" >div>
figure>
<figure class="flake4">
<div id="flower43" class="fourth" >div>
<div id="flower42" class="fourth" >div>
<div id="flower41" class="fourth" >div>
<div id="flower48" class="fourth" >div>
<div id="flower47" class="fourth" >div>
<div id="flower46" class="fourth" >div>
<div id="flower45" class="fourth" >div>
<div id="flower44" class="fourth" >div>
figure>
<figure class="flake5">
<div id="flower53" class="fifth" >div>
<div id="flower52" class="fifth" >div>
<div id="flower51" class="fifth" >div>
<div id="flower58" class="fifth" >div>
<div id="flower57" class="fifth" >div>
<div id="flower56" class="fifth" >div>
<div id="flower55" class="fifth" >div>
<div id="flower54" class="fifth" >div>
figure>
<div id="greeting" style="position: absolute; left: 200px;top: 420px;color: red;display: none">
<div style="font-size: 60px;font-weight: bolder;"> 生日快乐! !div>
<div style="font-size: 30px;font-weight: bolder;"> div>
div>
<script>
$(function () {
//bottom1的定时器
var bottom1Timer = setInterval(function () {
$("#bottom1").width($("#bottom1").width() + 5)
if ($("#bottom1").width() >= 550) {
clearInterval(bottom1Timer)
//底1线停下,底2线动
setTimeout(function () {
$("#bottom2").css("display", "block");
var bottom2Timer = setInterval(function () {
$("#bottom2").width($("#bottom2").width() + 5)
if ($("#bottom2").width() >= 450) {
clearInterval(bottom2Timer);
//底2线停下,底3线动
setTimeout(function () {
$("#bottom3").css("display", "block");
var bottom3Timer = setInterval(function () {
$("#bottom3").width($("#bottom3").width() + 5)
if ($("#bottom3").width() >= 350) {
clearInterval(bottom3Timer);
//底线3停下,内圈下边开始走
setTimeout(function () {
$("#rectDiv1").css("display", "block");
var rectDiv1Timer = setInterval(function () {
$("#rectDiv1").width($("#rectDiv1").width() + 5);
if ($("#rectDiv1").width() >= 250) {
clearInterval(rectDiv1Timer);
//内圈下边停下,右边开始走
$("#rectDiv2").css("display", "block");
var rectDiv2Timer = setInterval(function () {
$("#rectDiv2").height($("#rectDiv2").height() + 5);
if ($("#rectDiv2").height() >= 120) {
clearInterval(rectDiv2Timer);
//内圈右边停下,上边开始走
$("#rectDiv3").css("display", "block");
var rectDiv3Timer = setInterval(function () {
$("#rectDiv3").width($("#rectDiv3").width() + 5);
if ($("#rectDiv3").width() >= 250) {
clearInterval(rectDiv3Timer);
//内圈上边停下,左边开始走
$("#rectDiv4").css("display", "block");
var rectDiv4Timer = setInterval(function () {
$("#rectDiv4").height($("#rectDiv4").height() + 5);
if ($("#rectDiv4").height() >= 120) {
clearInterval(rectDiv4Timer);
//第一圈走完,把最外圈div填充
$("#border1").css("background", "#FFFF00");
//第二圈下边开始走
$("#rectDiv1").css("width", "10px");
$("#rectDiv1").css("height", "10px");
$("#rectDiv1").css("border", "#99CCFF 1px solid");
$("#rectDiv1").css("background", "#99CCFF");
$("#rectDiv1").css("z-index", "1");
var rectDiv1Timer = setInterval(function () {
$("#rectDiv1").width($("#rectDiv1").width() + 5)
if ($("#rectDiv1").width() >= 250) {
clearInterval(rectDiv1Timer);
//下边走完,右边开始走
$("#rectDiv2").css("width", "10px");
$("#rectDiv2").css("height", "10px");
$("#rectDiv2").css("border", "#99CCFF 1px solid");
$("#rectDiv2").css("background", "#99CCFF");
$("#rectDiv2").css("z-index", "1");
var rectDiv2Timer = setInterval(function () {
$("#rectDiv2").height($("#rectDiv2").height() + 5);
if ($("#rectDiv2").height() >= 80) {
clearInterval(rectDiv2Timer);
//右边走完,上边开始走
$("#rectDiv3").css("width", "10px");
$("#rectDiv3").css("height", "10px");
$("#rectDiv3").css("top", "750px");
$("#rectDiv3").css("border", "#99CCFF 1px solid");
$("#rectDiv3").css("background", "#99CCFF");
$("#rectDiv3").css("z-index", "1");
var rectDiv3Timer = setInterval(function () {
$("#rectDiv3").width($("#rectDiv3").width() + 5);
if ($("#rectDiv3").width() >= 250) {
clearInterval(rectDiv3Timer);
//上边走完,左边开始走
$("#rectDiv4").css("width", "10px");
$("#rectDiv4").css("height", "10px");
$("#rectDiv4").css("top", "750px");
$("#rectDiv4").css("border", "#99CCFF 1px solid");
$("#rectDiv4").css("background", "#99CCFF");
$("#rectDiv4").css("z-index", "1");
var rectDiv4Timer = setInterval(function () {
$("#rectDiv4").height($("#rectDiv4").height() + 5);
if ($("#rectDiv4").height() >= 80) {
clearInterval(rectDiv4Timer);
//第二圈走完,把中圈div填充
$("#border2").css("z-index", "2");
$("#border2").css("background", "#99CCFF");
//第三圈下边开始走
$("#rectDiv1").css("width", "10px");
$("#rectDiv1").css("height", "10px");
$("#rectDiv1").css("background", "white");
$("#rectDiv1").css("border", "white 1px solid");
$("#rectDiv1").css("z-index", "3");
var rectDiv1Timer = setInterval(function () {
$("#rectDiv1").width($("#rectDiv1").width() + 5)
if ($("#rectDiv1").width() >= 250) {
clearInterval(rectDiv1Timer);
//下边走完,右边走
$("#rectDiv2").css("width", "10px");
$("#rectDiv2").css("height", "10px");
$("#rectDiv2").css("background", "white");
$("#rectDiv2").css("border", "white 1px solid");
$("#rectDiv2").css("z-index", "3");
var rectDiv2Timer = setInterval(function () {
$("#rectDiv2").height($("#rectDiv2").height() + 5);
if ($("#rectDiv2").height() >= 40) {
clearInterval(rectDiv2Timer);
//右边走完,上边走
$("#rectDiv3").css("width", "10px");
$("#rectDiv3").css("height", "10px");
$("#rectDiv3").css("top", "790px");
$("#rectDiv3").css("border", "white 1px solid");
$("#rectDiv3").css("background", "white");
$("#rectDiv3").css("z-index", "3");
var rectDiv3Timer = setInterval(function () {
$("#rectDiv3").width($("#rectDiv3").width() + 5);
if ($("#rectDiv3").width() >= 250) {
clearInterval(rectDiv3Timer);
//上边走完,左边走
$("#rectDiv4").css("width", "10px");
$("#rectDiv4").css("height", "10px");
$("#rectDiv4").css("top", "790px");
$("#rectDiv4").css("border", "white 1px solid");
$("#rectDiv4").css("background", "white");
$("#rectDiv4").css("z-index", "3");
var rectDiv4Timer = setInterval(function () {
$("#rectDiv4").height($("#rectDiv4").height() + 5);
if ($("#rectDiv4").height() >= 40) {
clearInterval(rectDiv4Timer);
//第三圈走完,把中圈div填充
$("#border3").css("z-index", "3");
$("#border3").css("background", "white");
//第一根蜡烛
$("#candle1").css("display","block");
var candle1Timer = setInterval(function () {
$("#candle1").height($("#candle1").height() + 5);
if ($("#candle1").height() >= 35){
clearInterval(candle1Timer);
//第二根蜡烛
$("#candle2").css("display","block");
var candle2Timer = setInterval(function () {
$("#candle2").height($("#candle2").height() + 5);
if ($("#candle2").height() >= 35) {
clearInterval(candle2Timer);
//第三根
$("#candle3").css("display","block");
var candle3Timer = setInterval(function () {
$("#candle3").height($("#candle3").height() + 5);
if ($("#candle3").height() >= 35) {
clearInterval(candle3Timer);
//第4根
$("#candle4").css("display","block");
var candle4Timer = setInterval(function () {
$("#candle4").height($("#candle4").height() + 5);
if ($("#candle4").height() >= 35) {
clearInterval(candle4Timer);
//第5根
$("#candle5").css("display","block");
var candle5Timer = setInterval(function () {
$("#candle5").height($("#candle5").height() + 5);
if ($("#candle5").height() >= 35) {
clearInterval(candle5Timer);
//第6根
$("#candle6").css("display","block");
var candle6Timer = setInterval(function () {
$("#candle6").height($("#candle6").height() + 5);
if ($("#candle6").height() >= 35) {
clearInterval(candle6Timer);
//第一朵太阳花
setTimeout(function () {
$("#flower1").css("display","block");
setTimeout(function () {
$("#flower2").css("display","block");
setTimeout(function () {
$("#flower3").css("display","block");
setTimeout(function () {
$("#flower4").css("display","block");
setTimeout(function () {
$("#flower5").css("display","block");
setTimeout(function () {
$("#flower6").css("display","block");
setTimeout(function () {
$("#flower7").css("display","block");
setTimeout(function () {
$("#flower8").css("display","block");
//第2朵花
setTimeout(function () {
$("#flower21").css("display","block");
setTimeout(function () {
$("#flower22").css("display","block");
setTimeout(function () {
$("#flower23").css("display","block");
setTimeout(function () {
$("#flower24").css("display","block");
setTimeout(function () {
$("#flower25").css("display","block");
setTimeout(function () {
$("#flower26").css("display","block");
setTimeout(function () {
$("#flower27").css("display","block");
setTimeout(function () {
$("#flower28").css("display","block");
//第3朵花
setTimeout(function () {
$("#flower31").css("display","block");
setTimeout(function () {
$("#flower32").css("display","block");
setTimeout(function () {
$("#flower33").css("display","block");
setTimeout(function () {
$("#flower34").css("display","block");
setTimeout(function () {
$("#flower35").css("display","block");
setTimeout(function () {
$("#flower36").css("display","block");
setTimeout(function () {
$("#flower37").css("display","block");
setTimeout(function () {
$("#flower38").css("display","block");
//第4朵花
setTimeout(function () {
$("#flower41").css("display","block");
setTimeout(function () {
$("#flower42").css("display","block");
setTimeout(function () {
$("#flower43").css("display","block");
setTimeout(function () {
$("#flower44").css("display","block");
setTimeout(function () {
$("#flower45").css("display","block");
setTimeout(function () {
$("#flower46").css("display","block");
setTimeout(function () {
$("#flower47").css("display","block");
setTimeout(function () {
$("#flower48").css("display","block");
//第5朵花
setTimeout(function () {
$("#flower51").css("display","block");
setTimeout(function () {
$("#flower52").css("display","block");
setTimeout(function () {
$("#flower53").css("display","block");
setTimeout(function () {
$("#flower54").css("display","block");
setTimeout(function () {
$("#flower55").css("display","block");
setTimeout(function () {
$("#flower56").css("display","block");
setTimeout(function () {
$("#flower57").css("display","block");
setTimeout(function () {
$("#flower58").css("display","block");
//显示祝福信息
$("#greeting").css("display","block");
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
},75)
}
},20)
}
},20)
}
},20)
}
},20)
}
},20)
}
},20)
}
}, 8)
}
}, 8)
}
}, 8)
}
}, 8)
}
}, 8)
}
}, 8)
}
}, 8)
}
}, 8)
}
}, 8);
}
}, 8);
}
}, 8);
}
}, 8);
}, 250)
}
}, 1);
}, 500)
}
}, 1);
}, 500)
}
}, 1);
})
script>
body>
html>