css3+svg实现拥挤的出租车队行驶动画效果源码.zip资源-CSDN文库

共3个文件

svg：2个

html：1个

版权申诉

css3

128 浏览量 2022-10-31 02:05:48 上传评论收藏 5KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

css3+svg实现拥挤的出租车队行驶动画效果源码.zip （3个子文件）

132692092889216562

images

cab_front.svg 4KB

cab_front_back.svg 4KB

index.html 6KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3 svg出租车队/拥挤的车道动画</title> <style> body { padding: 200px; text-align: center; } .cab-group { margin: auto; position: relative; } .cab-group .cab { position: absolute; } .cab-group .cab .container { width: 100px; position: absolute; } .cab-group .cab .container img { position: relative; z-index: 1; -webkit-animation: rise 0.2s infinite linear; animation: rise 0.2s infinite linear; } .cab-group .cab .container:before, .cab-group .cab .container:after { content: ""; background-color: #000; border-radius: 3px; position: absolute; width: 15px; height: 14px; top: 63px; left: 4px; z-index: 0; } .cab-group .cab .container:after { left: 80px; } .cab-group .cab1 { z-index: 5; } .cab-group .cab2 { -webkit-animation: zigzag 4s infinite linear; animation: zigzag 4s infinite linear; animation-animation-delay: 0s; z-index: 4; } .cab-group .cab2 img { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .cab-group .cab2 .container { -webkit-transform: translate3d(-36px, -8px, 0) scale(0.9); transform: translate3d(-36px, -8px, 0) scale(0.9); } .cab-group .cab3 { -webkit-animation: zigzag 4s infinite linear; animation: zigzag 4s infinite linear; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; z-index: 3; } .cab-group .cab3 img { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .cab-group .cab3 .container { -webkit-transform: translate3d(-70px, -18px, 0) scale(0.7); transform: translate3d(-70px, -18px, 0) scale(0.7); } .cab-group .cab4 { -webkit-animation: zigzag 4s infinite linear; animation: zigzag 4s infinite linear; -webkit-animation-delay: 1s; animation-delay: 1s; z-index: 2; } .cab-group .cab4 img { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .cab-group .cab4 .container { -webkit-transform: translate3d(36px, -8px, 0) scale(0.9); transform: translate3d(36px, -8px, 0) scale(0.9); } .cab-group .cab5 { -webkit-animation: zigzag 4s infinite linear; animation: zigzag 4s infinite linear; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; z-index: 1; } .cab-group .cab5 img { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .cab-group .cab5 .container { -webkit-transform: translate3d(70px, -18px, 0) scale(0.7); transform: translate3d(70px, -18px, 0) scale(0.7); } @-webkit-keyframes zigzag { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 50% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); } 75% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes zigzag { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 50% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); } 75% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes rise { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(-0.5deg); transform: translate3d(0, 0, 0) rotate(-0.5deg); } 25% { -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); } 50% { -webkit-transform: translate3d(0, 0, 0) rotate(0.5deg); transform: translate3d(0, 0, 0) rotate(0.5deg); } 75% { -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(-0.5deg); transform: translate3d(0, 0, 0) rotate(-0.5deg); } } @keyframes rise { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(-0.5deg); transform: translate3d(0, 0, 0) rotate(-0.5deg); } 25% { -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); } 50% { -webkit-transform: translate3d(0, 0, 0) rotate(0.5deg); transform: translate3d(0, 0, 0) rotate(0.5deg); } 75% { -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(-0.5deg); transform: translate3d(0, 0, 0) rotate(-0.5deg); } } </style> </head> <body> <div class='cab-group'> <div class='cab cab1'> <div class='container'> <img alt='' src='images/cab_front.svg'> </div> </div> <div class='cab cab2'> <div class='container'> <img alt='' src='images/cab_front_back.svg'> </div> </div> <div class='cab cab3'> <div class='container'> <img alt='' src='images/cab_front_back.svg'> </div> </div> <div class='cab cab4'> <div class='container'> <img alt='' src='images/cab_front_back.svg'> </div> </div> <div class='cab cab5'> <div class='container'> <img alt='' src='images/cab_front_back.svg'> </div> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉