svg圣诞节倒计时效果代码
代码语言:html
所属分类:其他
代码描述:svg圣诞节倒计时效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Orbitron:900');
html {
height:100%;
}
body {
background-image:linear-gradient(180deg,black,#192a56 65%,#130f40);
overflow:hidden;
color:white;
}
#timer {
position:absolute;
top:35%;
left:50%;
transform:translate(-50%,-50%);
width:600px;
height:150px;
font-family:'Orbitron',sans-serif;
font-size:48px;
}
.time {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.dcon {
position:absolute;
width:25%;
height:100%;
}
.dcon:after {
content:'Days';
font-size:28px;
position:absolute;
transform:translate(-50%,-50%);
left:50%;
top:120%;
}
.hcon {
position:absolute;
left:150px;
width:25%;
height:100%;
}
.hcon:after {
content:'Hours';
font-size:28px;
position:absolute;
transform:translate(-50%,-50%);
left:50%;
top:120%;
}
.mcon {
position:absolute;
left:300px;
width:25%;
height:100%;
}
.mcon:after {
content:'Minutes';
font-size:28px;
position:absolute;
transform:translate(-50%,-50%);
left:50%;
top:120%;
}
.scon {
position:absolute;
left:450px;
width:25%;
height:100%;
}
.scon:after {
content:'Seconds';
font-size:28px;
position:absolute;
transform:translate(-50%,-50%);
left:50%;
top:120%;
}
.land {
position:absolute;
top:65%;
left:0%;
width:100%;
height:20vh;
transform:tranlsate(-50%,-50%);
}
.house {
position:fixed;
width:25%;
background:none;
top:45%;
left:1%;
}
.window {
position:absolute;
top:61%;
left:50%;
transform:translate(-50%,-50%);
width:23%;
height:23%;
border-radius:6px;
background:none;
box-shadow:inset 0px 0px 36px white;
}
.snow {
font-size:48px;
text-sh.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0