Zipper Merge Demo: css3 transform animation

Zipper Merge

Source

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zipper merge</title>
<style>
#road {background-color:#666; position:relative; width:800px; height:250px;
 overflow:hidden;}
.solid-line {position:absolute;left:0; width:100%;height:4px; background-color:white;}
.top-line {top:30px;}
.bottom-line {top:220px;}
.mid-line {position:absolute;left:0; top:122px;width:100%;height:1px;
 border-bottom:4px dashed white;}
.car1, .car2 {position:absolute;left:-100px;top:50px;width:100px;height:50px;background-image:url("data:image/png;base64,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")}
.car3, .car4 {position:absolute;left:-100px;top:150px;width:100px;height:50px;background-image:url("data:image/png;base64,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");}
.car1 {
  animation-duration:5s;
  animation-name:car1;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
.car2 {
  animation-duration:5s;
  animation-name:car1;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
  animation-delay:2.5s;
}
.car3 {
  animation-duration:5s;
  animation-name:car2;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
  animation-delay: 1s;
}
.car4 {
  animation-duration:5s;
  animation-name:car2;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
  animation-delay: 3.5s;
}

.merge-sign {position:absolute;left:80%;top:55%;width:82px;height:82px;
  transform:rotate(90deg); 
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABSCAYAAADHLIObAAAABmJLR0QA/wD/AP+gvaeTAAAFJklEQVR4nO3dTWgcZRzH8e/smslLs9haTb2o9FYRaUBEI0GxRtAopVqCKW203hTFiy9JPQQPHnoSm1YFhTYlGHOx2MRjNXgoFQslthFLLamhCCEmB5Osm2yyGQ+bZ2vivszLM8/Lxh/sYZlh9s9nZ3fnedlnwNw8B4wAs8DvwEngAZ0F2RYH6AO8Io8l4JC+0uyJA3zKGtyhPXXecO/t3pfvprxHd9UIzBWgS2eRpmcdYndHg5c+c2fhMTO03Wtrdo3FTOouYC0O8AnwOkB3RwO9BxrW7VCTdNjX4nLpeo6JqVwC2AvcAC6rLrZYTICsiChiMqZuSN+IIqZi6oQMjChiIqYuyNCIIqZh6oCMjChiEqZqSGmIIqZgqoSUjihiAqYqyNgQRXRjqoCMHVFEJ2bckMoQRXRhxgmpHFFEB2ZckIERvz6/xK57bsNx5BSgGjMOyMCIR/rT9PSn+WN2lfaHXSsxZUOGQuwbzgDw840VazFlQkZCFLEVUxakFEQRGzFlQEpFFLENMypkLIgiNmFGKS8woufBX2kPgJ+uLfPCh3Ml9z39doq23S4AqQaHZCJCpUWSyXp0Hp3n3FgWIAe8CgyEPV7Y8kJdbDsObG102Nro0Fhf/j1srHMK+8pGBKh3HYZ6UrQ1u5D/ZJ4iwoBamBK1tVhkRyZmUMiqQRSRhRkEsuoQRWRg+oWsWkSRqJh+IKseUSQKZiXITYMoEhazHOSmQxQJg1kKUjvid2PLSl9vY4JiFmsiKkG8ObPKwPdLJbdf/G2FxazHnrXWjY4EaU5uhFR2JlaCBLhwdYWMJZj/hlT6cfYDCfCjJZgCUvl3ol9IsANTQB4H3gB1PyxBICGP+feSx1PmYf4C/JoA2oE3wfxLnI+/yfD+6bTWGor8mn8ONCVYOxMPPllrNKLIsbNmYA6+l2LnjiTAHcDLCeARgI7WWp21BYoJmFvqHPa3Fr5mWhLAPEB60dNWVLF0PlFbtkP32NkMR/r1YqZvjZgsJIBRgBMji2Sy5mB2tNbyxVupsph9w/owJ6ZyDIwuiqejCeAjIHvh6jKdR+eNwnzpcTMxJ6dzPP/BHAsZD+AKMJgAxoHDQO7cWNZazJ5TajAnp3M82zvH5HQOYAY4CGRFeV+RH0WzFvP4SPyYRRCfJn9Gruv9GaAKMLtPxoNZAnFMbN9YlvWYJ76Vf2lUCRGK90daj3nmvP+mZ6X4QYTSHbvWY8qIX0QoP9RgPGbvgS2xHT8IIlQe/DIa896meE7JoIjgbzjWaEzZCYMI/icIbArMsIgQbMpKVWNGQYTgk6iqEjMqIoSb1ldVmDIQIfxE06rAlIUI4SHBckyZiBANEizFlI0I0SHBMsw4EEEOJFiCGRciyIMEwzHjRAS5kGAoZtyIIB8SDMNUgQjR/vlVKV3kJ2cm25pdhnpS1Lu3Xm52bpUfxktPJn3s/hru3lb+fb45s8rFa/89RkOtwzMPucoQIV5IqIAZZ1QiQvyLg1wmP/Vt78RULnHpeo59LS41yXgxVSOCmuVqlGLqQAR1CygpwdSFCGqX9IoVUyciqF9kLhZM3YigZ9lDqZgmIIK+hTilYJqCCHqXho2EaRIi6F+sOBSmaYigHxICYpqICGZAgk9MUxFNTBf52wd4bc2uNz24vXCLgfHPtnn3NSXFLQb+BJq1VmpBCpg7dyS9d/bXe6+113mN9c7/iCHyIvn72Gy8DcsV4EGNdZWMmj6tcLkLeAVoARbI/41lEMjqLKpU/gEoDeenhtnFvwAAAABJRU5ErkJggg==");
  }
@keyframes car1 {
  from {transform:translate(0,0);
  }
  to {transform:translate(900px,0);}
}
@keyframes car2 {
  0% {transform:translate(0, 0);}
  50% {transform:translate(400px,0)}
  70% {transform:translate(600px,-100px)}
  100% {transform:translate(900px, -100px)}
}
</style>
</head>
<body>
<h1>Zipper Merge</h1>
<div id="road">
<div class="solid-line top-line"></div>
<div class="mid-line"></div>
<div class="solid-line bottom-line"></div>
<div class="merge-sign" ></div>
<div class="car1"></div>
<div class="car2"></div>
<div class="car3"></div>
<div class="car4"></div>
</div>  
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值