css实现滑板动画
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .skater, .skater__body, .skater__board { animation-iteration-count: infinite; -webkit-animation-duration: 5s; } .skater { position: relative; height: 43px; margin-top: 63px; -webkit-animation-name: skater; } .skater__body { position: absolute; top: 0; left: 17.5px; width: 15px; height: 40px; border: 1px solid green; -webkit-animation-name: body; } .skater__board { position: absolute; top: 50px; width: 50px; height: 3px; background: orange; -webkit-animation-name: board; } @-webkit-keyframes skater { 0% { margin-left: 0; } 20% { margin-top: 63px; } 26% { margin-top: 20px; } 32% { margin-top: 63px; } 100% { margin-left: 90%; } } @-webkit-keyframes board { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0