訂單彈幕彈出效果製作--【HTML篇】

訂單彈幕彈出效果製作--【HTML篇】

動態效果圖如下：

代碼如下：

首先要寫DIV框架

<!--版權設計364500483；授權博客https://blog.csdn.net/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效果下集繼續；