css实现乌龟与兔子赛跑动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现乌龟与兔子赛跑动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> <link href='https://fonts.googleapis.com/css?family=Asul:400,700' rel='stylesheet'> </style> <style> * { box-sizing: border-box; } body { overflow: hidden; margin:0; padding-top: 15px; background: #effcff url('body-bg.png') no-repeat 50% 5%; text-align: center; font: .75em normal 'Asul', sans-serif; -webkit-perspective: 800; } .tortoise, .hare, .road, .road:after, .go:after { position: absolute; } .go { position: relative; margin: 35px auto; color: white; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.5); font-size: 2.5em; cursor: pointer; } .go:after { top: -5px; left: -150px; display: block; padding: 10px 0; width: 300px; border: 1px solid #76011b; border-radius: 8px; background: linear-gradient(to bottom,rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); box-shadow: 0px 0px 10px rgba(19,93,158,.6); content: "Start Race!"; } .go:checked:after { background: linear-gradient(to bottom,rgba(109,0,25,1) 0%,rgba(143,2,34,1) 61%,rgba(169,3,41,1) 100%); content: "Reset Race"; } .tortoise, .hare { left: 2%; z-index: 3000; } .tortoise { -webkit-transform: translate3d(0,255px,0); } .hare { -webkit-transform: translate3d(0,430px,0); } .road { top: 195px; left: -90px; overflow: hidden; width: 128%; height: 400px; border-bottom: 6px solid #9a6e2d; background: url('road.png') repeat-x 0 50%; } .road:after { top: 47px; left: 72%; display: block; padding: 126px 0 0 25px; width: 250px; height: 400px; background: rgba(19,93,158,.5); color: white; content: "Winner!"; text-align: left; letter-spacing: 1px; font-size: 2.2em; opacity: 0; } /* Race Animations */ .go:checked + .tortoise { animation: go-tortoise 6s 1 1.3s ease-in-out forwards; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0