第一步：
新建三个文件夹：img、js、css，一个html文件index.html
编辑器打开 index.html，
第二步：
键盘英文模式下按下!，生成html基本模版
第三步：
修改网页标题<title>Document</title>为<title>魔性抽奖</title>
第四步：
引入所需的css
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/animate.min.css">
第五步：
分析样式布局，先实现整个网页的背景，再实现抽奖标题，再实现标题下大的白线div盒子，然后使用ul li实现抽奖人姓名列表，采用flex布局，名字列表下在实现俩按钮，按钮下使用position: absolute;定位+flex布局实现样式。然后在使用position: absolute;定位实现白色div盒子外，网页两侧的左右两个图片布局样式，最后实现幸运者文字样式布局。
下面开始开发：
先实现网页背景:
body{
background-image: url("../img/bg.gif");
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
再实现抽奖标题:
<p class="title">抽奖</p>
.title{
color: red;
font-size: 40px;
text-align: center;
}
再实现标题下大的白线div盒子：
<div class="wrapper">
......
......
......
</div>
.wrapper {
width: 800px;
height: 430px;
margin: 10px auto;
border: 2px solid #ccc;
text-align: center;
position: relative;
padding-top: 12px;
box-sizing: border-box;
}
然后使用ul li实现抽奖人姓名列表，采用flex布局:
<ul>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
</ul>
.wrapper ul{
list-style: none;
color: #fff;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.wrapper ul li{
border: 1px solid #fff;
padding: 6px 20px;
margin-right: 12px;
margin-bottom: 12px;
border-radius: 6px;
}
名字列表下在实现俩按钮:
<!-- 按钮 -->
<button class="start">开始抽奖</button>
<button class="stop">停止抽奖</button>
/* 按钮样式 */
.start ,.stop{
width: 80px;
height: 40px;
border: none;
outline: none;
background: linear-gradient(to right,pink,#5dd6c7);
cursor: pointer;
border-radius: 6px;
color: #333;
font-weight: bold;
margin-top: 12px;
margin-right: 12px;
}
按钮下使用position: absolute;定位+flex布局实现样式:
<div class="img_wrap">
<img src="./img/audio.gif" alt="">
<img src="./img/come.gif" alt="">
</div>
.img_wrap{
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
.img_wrap img{
width: 200px;
height: 180px;
}
然后在使用position: absolute;定位实现白色div盒子外，网页两侧的左右两个图片布局样式:
<!-- box外围左右俩图片 -->
<div class="img1">
<img src="./img/audio1.gif" alt="">
</div>
<div class="img2">
<img src="./img/audio1.gif" alt="">
</div>
.img1{
width: 300px;
height: 200px;
position: absolute;
left: 0%;
bottom: 10%;
}
.img2{
width: 300px;
height: 200px;
position: absolute;
right: 0% !important;
bottom: 10%;
}
.img1 img{
width: 100%;
height: 100%;
}
.img2 img{
width: 100%;
height: 100%;
}
最后实现幸运者文字样式布局:
<div class="lucking">幸运者</div>
.lucking{
text-align: center;
color: #fff;
font-size: 60px;
color:pink;
font-weight: bold;
line-height: 140px;
}
拓展一点：实现幸运者文字无限循环放大：
引入animate.css
lucking的div加上对应的class类名：animated bounceIn infinite
animated是必要的类名，bounceIn是动画效果，infinite是无限循环
end！
