订单弹幕弹出效果制作--【HTML篇】

订单弹幕弹出效果制作--【HTML篇】

动态效果图如下：

代码如下：

首先要写DIV框架

<!--版权设计364500483；授权博客https://blog.youkuaiyun.com/yang3rui-->

<div class="buyers-container" id="buyers-container">
  <div class="buyers-item" id="buyers-item0">
    <img src="images/1.jpg" alt="" width="20" height="20" class="buyers-img">
    <p>扬州市杨**购买了该商品，10分钟前</p>
  </div>
  <div class="buyers-item" id="buyers-item1">
    <img src="images/2.jpg" alt="" width="20" height="20" class="buyers-img">
    <p>徐州市张**购买了该商品，16分钟前</p>
  </div>
  <div class="buyers-item" id="buyers-item2">
    <img src="images/3.jpg" alt="" width="20" height="20" class="buyers-img">
    <p>福州市吴**购买了该商品，18分钟前</p>
  </div>
  <div class="buyers-item" id="buyers-item3">
    <img src="images/4.jpg" alt="" width="20" height="20" class="buyers-img">
    <p>台州市武**购买了该商品，40分钟前</p>
  </div>
  <div class="buyers-item" id="buyers-item4">
    <img src="images/5.jpg" alt="" width="20" height="20" class="buyers-img">
    <p>吴中市孙**购买了该商品，34分钟前</p>
  </div>
</div>

然后设计CSS ：

<style>
.buyers-container{position: fixed;top:.66rem;left:.4rem;color: #fff; height:34px;overflow: hidden;z-index: 99999999;}
.buyers-item { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; align-items: center;padding:0 5px;
height:34px;line-height:34px;-webkit-border-radius:16px;border-radius:16px;background: rgba(0,0,0,.6);-webkit-transition: 1;transition: 1; opacity: 0;}
.buyers-in {-webkit-animation: 1s show linear;animation: 1s show linear;opacity: 1;}
.buyers-out {-webkit-animation: 1s hide linear;animation: 1s hide linear;}
.buyers-show {opacity: 1}
.buyers-item p {max-width:200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-size:12px;}
.buyers-img {width:28px;height:28px;-webkit-border-radius:50%;border-radius:50%;margin-right:10px;margin-left:1px;}
@-webkit-keyframes show {
	0% {opacity:0}
	to {opacity: 1}
}
@keyframes show {
	0% {opacity:0}
	to {opacity: 1}
}
@-webkit-keyframes hide {
	0% {opacity:1}
	to {opacity: 0}
}
@keyframes hide {
	0% {opacity:1}
	to {opacity: 0}
}
</style>

其实万事不离其中，想实现效果，第一步您的HTML界面先设计好，不然任您技术多牛X，是做不出好的效果的;

先制作前端HTML效果，JavaScript效果下集继续；