[代码样式]直播平台主播列表效果

简介

如今，直播似乎成了一些人生活不可缺少的一部分，有事没有就看几分钟。各种直播平台也是不断冒出，为了吸引用户，平台也是使出各种招数，除了明星、美女、搞怪、组团之外，平台的 UI 界面也花费了不少功夫，今天来制作一个直播平台主播列表的效果。

浏览器兼容

IE9+	Edge	Chrome	Firefox	Opera	Safari

制作方法

1、HTML

<div class="dowebok">
<ul>
<li>
<a class="pic" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/img1.jpg" alt="">
<div class="follower">
<span class="view">666</span>
</div>
</a>
<div class="info">
<a class="info-avatar" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/img1.jpg" alt="">
</a>
<a class="info-name" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >初莲心</a>
</div>
</li>
<li>
<a class="pic" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/img2.jpg" alt="">
<div class="follower">
<span class="view">666</span>
</div>
</a>
<div class="info">
<a class="info-avatar" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/img2.jpg" alt="">
</a>
<a class="info-name" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >初莲心</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;}

百度网盘" name="直播平台主播列表效果" pass="https://pan.baidu.com/s/1jJUbTnK" code=""]