直播平台主播列表效果
简介
如今，直播似乎成了一些人生活不可缺少的一部分，有事没有就看几分钟。各种直播平台也是不断冒出，为了吸引用户，平台也是使出各种招数，除了明星、美女、搞怪、组团之外，平台的 UI 界面也花费了不少功夫，今天来制作一个直播平台主播列表的效果。
浏览器兼容
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| IE9+ | Edge | Chrome | Firefox | Opera | Safari |
制作方法
1、HTML
<div class="dowebok"> <ul> <li> <a class="pic" href=""> <img src="images/img1.jpg" alt=""> <div class="follower"> <span class="view">666</span> </div> </a> <div class="info"> <a class="info-avatar" href=""> <img src="images/img1.jpg" alt=""> </a> <a class="info-name" href="">初莲心</a> </div> </li> <li> <a class="pic" href=""> <img src="images/img2.jpg" alt=""> <div class="follower"> <span class="view">666</span> </div> </a> <div class="info"> <a class="info-avatar" href=""> <img src="images/img2.jpg" alt=""> </a> <a class="info-name" href="">初莲心</a> </div> </li> ... </ul> </div>
2、CSS
* { margin: 0; padding: 0;}
.dowebok { width: 880px; margin-left: auto; margin-right: auto; font-size: 0;}
.dowebok ul { margin: -40px 0 0 -10px;}
.dowebok li { display: inline-block; margin: 40px 0 0 10px; vertical-align: top;}
.dowebok a { display: inline-block;}
.dowebok img { border: 0;}
.dowebok .pic { position: relative; border-radius: 10px; overflow: hidden;}
.dowebok .pic img { transform: scale(1.0);}
.dowebok .pic .follower { position: absolute; left: 0; right: 0; top: 172px; bottom: 0; padding: 10px; font-size: 12px; color: #fff; background-color: #000; opacity: 0.4;}
.dowebok .pic:hover img { transform: scale(1.1); transition: all 1s;}
.dowebok .pic:hover .follower { top: 0; background: #000 url(images/play.png) 50% no-repeat;}
.dowebok .pic .view { position: absolute; left: 10px; bottom: 10px; padding-left: 22px; background: url(images/eye.png) 0 no-repeat;}
.dowebok .info { height: 32px; margin-top: 10px;}
.dowebok .info-avatar { display: inline-block; vertical-align: middle;}
.dowebok .info img { width: 32px; height: 32px; border-radius: 50%;}
.dowebok .info-name { display: inline-block; margin-left: 10px; font-size: 14px; color: #666; text-decoration: none; vertical-align: middle;}
.dowebok .info-name:hover { color: #333;}
