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