[微信小程序]物流信息样式加动画效果(源代码附效果图)

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

效果图片:(信息仅为示例)   

 

 

  
  
    物流公司: {{wuliu.company}}申通快递
    物流单号: {{wuliu.nu}}4326665981311546542
    官方电话: {{wuliu.phone}}95533
  



  
    
    
      {{item}},发往深圳太远客运中转部
       {{wuliu.phone}}2017-12-11 23:16:12
    
    
  

 

 

 

 

 

wuliu: ['已接收', '抵达深圳', '抵达广州'],

 

 

/* pages/order/order_wl.wxss */
.goods{
  margin: 50rpx;
  height: 150rpx;
  width: 150rpx;
  border-radius: 15rpx;
}
.logistics{
  margin-top: 70rpx;
  font-size: 28rpx;
}
.br{
  width: 95%;
  margin-left: 2.5%;
  margin-bottom: 30rpx;
  background: #d0d0d0;
  height: 1rpx;
}

/* 下部分 */
.logistics_centent{
  position: absolute;
  left: 100rpx;
  font-size: 28rpx;
  color: #666
}
.icon{
  width: 20rpx;
  height: 20rpx;
  background: white;
  border-radius: 50%;
  display: inline-block;
  margin:0rpx 20rpx 0rpx 40rpx;
}
.in{
  border: 1rpx solid red;
  animation: my_animation 2s infinite;
}
@keyframes my_animation{
    100% {  
    transform: scale(2);  
    background-color: transparent;  
    }  
}

.no_in{
  border: 1rpx solid #d0d0d0;
}
.on{
  background: #d0d0d0;
  height: 100rpx;
  width: 1px;
  margin-left: 50rpx;
}