本帖最后由 小脑斧 于 2020-4-18 15:44 编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
background: url("big.jpeg") no-repeat 50% 0;
font-family: "仿宋";
color: #e02562;
}
#main{
opacity: 0;/*opacity初始值设为0，即完全透明。而是从完全透明，渐变出来。结合transtion,更详细结合js*/
transition: all 2.2s .5s;
padding-top: 450px;
text-align: center;
}
#main.show{
opacity: 1;
}
#main,#slogan,#run{
position: relative;
height: 1400px;
}
#main{
}
#main h1{
font-size: 150px;
font-family: "Caslon" ;
}
#slogan{
padding-top: 335px;
text-align: center;
}
#slogan h1{
display: inline-block;
padding-top: 12px;
padding-bottom: 12px;
font-size: 55px;
border-top: 3px solid #000000;
border-bottom: 3px dotted #000000;
}
#slogan h2{
font-size: 55px;
}
#run h1{
position: absolute;
font-size: 77px;
right: 41%;
top: 1%;
}
#run h2{
position: absolute;
font-size: 33px;
right: 44%;
top: 10%;
font-family: "楷体";
}
#run img{
position: absolute;
right: 45%;
top: 18%;
}
</style>
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#main').addClass('show');
});
</script>
</head>
<body>
<div id="main">
<h1>鱼C英雄帖</h1>
<h2>欢迎加入鱼C党卫军</h2>
</div>
<div id="slogan">
<h1>隐藏在黑暗中的正义</h1>
<h2>守护鱼C和平</h2>
</div>
<div id="run">
<h1>I need U</h1>
<h2>让编程改变世界</h2>
<img src="3.jpg">
</div>
</body>
</html>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-3-21 14:35:44
置顶卡
千斤顶
显身卡
发表于 2019-3-31 17:25:06
特别好看
养成暖贴回复的好习惯，JS还是有点不清楚
发表于 2020-4-2 16:57:03
