!
也想出现在这里? 联系我们
广告位

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

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

简介

如今,直播似乎成了一些人生活不可缺少的一部分,有事没有就看几分钟。各种直播平台也是不断冒出,为了吸引用户,平台也是使出各种招数,除了明星、美女、搞怪、组团之外,平台的 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;}

[b2_file link="

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

给TA打赏
共{{data.count}}人
人已打赏
脚本代码

[代码样式]有趣的动画幻灯片

2020-8-24 10:16:05

脚本代码

[代码样式]FlexSlider制作《英雄联盟》幻灯片

2020-8-24 10:16:30

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索