让小甲鱼3个字 开始隐藏 慢慢 出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="js/jquery.min.js"></script>
<script>
// $(function(){
// $('#main').addClass('show');
// })
$(document).ready(function() {
$('#main').addClass('show');
});
</script>
</head>
<body>
<div id="main">
<h1>小甲鱼</h1>
<h2>1</h2>
</div>
<div id="slogin">
<h1>小黑鱼</h1>
<h2>2</h2>
</div>
<div id="run">
<h1>小金鱼</h1>
<h2>3</h2>
<img src="imgs/xiangyun.png" alt="xiangyun">
</div>
</body>
</html>-----------------------------------------
body {
/*width: 1226px;
height: 2000px;
border: 1px solid red;*/
background
:
url(
imgs/bg.jpg)
no-repeat
50
%
0;
color
:
#e02562;
}
#main,
#slogan,
#run {
position
:
relative;
height
:
666
px;
}
#main {
padding-top
:
555
px;
text-align
:
center;
opacity
:
0;
transition
:
all
2.2
s
.3
s;
}
#main.show {
opacity
:
1;
}
#main
h1 {
font-size
:
93
px;
}
#main
h2 {
font-size
:
33
px;
font-weight
:
100;
}
#slogin {
padding-top
:
111
px;
text-align
:
center;
}
#slogin
h1 {
display
:
block;
padding-top
:
12
px;
padding-bottom
:
12x;
border-top
:
3
px
solid
#000;
border-bottom
:
3
px
dotted
#000;
}
#slogan
h2 {
font-size
:
33
px;
}
#run
h1 {
position
:
absolute;
font-family
:
"
Abadi MT Condensed Extra Bold
";
font-size
:
77
px;
right
:
44
%;
top
:
11
%;
}
#run
h2 {
position
:
absolute;
font-size
:
33
px;
right
:
50
%;
top
:
30
%;
}
#run
img {
position
:
absolute;
left
:
40
%;
top
:
40
%;
}
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
