特效介绍

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

浏览器兼容

IE9+	Edge	Chrome	Firefox	Opera	Safari

演示截图

制作方法

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>

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;}

相关推荐: CSS3实例：单选按钮卡片选中ui特效

实例介绍 纯css3制作radio单选按钮选中美化，单选框选中边框变色ui特效。 演示截图 相关推荐: 通用的app软件下载页面模板模板介绍 本项目不安装也可以使用。 根目录下的out文件夹中可以看到index.html。 一般的纯HTML一样，SEO优化也支…