无极源码之家 > 建站教程 > 网页设计正文

纯css3实现的物流快递跟踪状态更新css3特效代码下载

无极源码之家网页设计

2018-11-18

纯css3实现的物流公司模拟京东淘宝物流状态的特效代码，可以在不需要js文件的支持来实现的物流状态css代码下载，一个页面全部搞定加载速度快推荐
代码案例
<!DOCTYPE html>

<html>

<head>

<style>

body{font-size: 12px;}

ul li{list-style: none;}

.track-rcol{width: 900px; border: 1px solid #eee;}

.track-list{margin: 20px; padding-left: 5px; position: relative;}

.track-list li{position: relative; padding: 9px 0 0 25px; line-height: 18px; border-left: 1px solid #d9d9d9; color: #999;}

.track-list li.first{color: red; padding-top: 0; border-left-color: #fff;}

.track-list li .node-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(http://demo.daimabiji.com/3531/img/order-icons.png) -21px -72px no-repeat;}

.track-list li.first .node-icon{background-position:0 -72px;}

.track-list li .time{margin-right: 20px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}

.track-list li .txt{max-width: 600px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}

.track-list li.first .time{margin-right: 20px; }

.track-list li.first .txt{max-width: 600px; }

</style>

</head>

<body>

<ul>

2016-03-10 18:07:15

感谢您在京东购物，欢迎您再次光临！

</li>

<li>

2016-03-10 18:07:15

【京东到家】京东配送员【申国龙】已出发，联系电话【18410106883，感谢您的耐心等待，参加评价还能赢取京豆呦】

</li>

<li>

2016-03-10 18:07:15

感谢您在京东购物，欢迎您再次光临！

</li>

<li>

2016-03-10 18:07:15

感谢您在京东购物，欢迎您再次光临！

</li>

<li>

2016-03-10 18:07:15

感谢您在京东购物，欢迎您再次光临！

</li>

<li>

2016-03-10 18:07:15

感谢您在京东购物，欢迎您再次光临！

</li>

</ul>

</div>

</body>

</html>

效果：

加入收藏打赏

感谢您的支持，我会继续努力的!

打开微信扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

1. 本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！如有侵权请邮件联系客服！
2. 本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理！
3. 您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源！如用于商业或者非法用途，与本站无关，一切后果请用户自负！
4. 如果您也有好的资源或教程，您可以投稿发布，成功分享后有积分奖励和额外收入！

无极源码之家 > 建站教程 > 网页设计纯css3实现的物流快递跟踪状态更新css3特效代码下载 https://160170.cn/Teach/3644.html