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

来源：互联网发布：c语言windows.h教程编辑：程序博客网时间：2024/06/11 03:30

先上图片:(信息仅为示例) 微信小程序开发交流群(173683895)

<!--pages/order/order_wl.wxml--><view class='page_row top'>  <image class='goods' src='../../images/dsh.png'></image>  <view class='page_clu logistics'>    <text>物流公司: {{wuliu.company}}申通快递</text>    <text>物流单号: {{wuliu.nu}}4326665981311546542</text>    <text>官方电话: {{wuliu.phone}}95533</text>  </view></view><view class='br'></view><block wx:for="{{wuliu}}" wx:key="index">  <view class='order'>    <view class='icon {{0==index?"in":"no_in"}}'></view>    <view class='logistics_centent page_clu'>      <text>{{item}},发往深圳太远客运中转部</text>      <text> {{wuliu.phone}}2017-12-11 23:16:12</text>    </view>    <view class='on'></view>  </view></block><view class='icon no_in'></view>

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

阅读全文

0 0