SVG有趣的贪吃蛇分页动画

Pacman pagination

svg, css3, pagination

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3076
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://rsms.me/inter/inter-ui.css');
body {
    align-items: center;
    color: #555;
    display: flex;
    font-family: 'Inter UI', sans-serif;
    font-size: 1.25em;
    justify-content: center;
    height: 100vh;
    margin: 0;
}
.container {
    display: inline-block;
    position: relative;
}
.index {
    cursor: pointer;
    display: inline;
    margin-right: 30px;
    padding: 5px;
    user-select: none;
    -moz-user-select: none;
}
.index:last-child {
    margin: 0;
}
svg {
    left: -13px;
    position: absolute;
    top: -11px;
    transition: transform 500ms;
    width: 46px;
}
path {
    fill: none;
    stroke: #2FB468;
    stroke-dasharray: 150 150;
    stroke-width: 15;
}
.container.open:not(.flip) path {
    animation: OpenRight 500ms;
}
.container.open.flip path {
    animation: OpenLeft 500ms;
}
.container.i1 svg {
    transform: translateX(0);
}
.container.i2 svg {
    transform: translateX(50px);
}
.container.i3 svg {
    transform: translateX(102px);
}
.container.i4 svg {
    transform: translateX(154px);
}
.container.i5 svg {
    transform: translateX(206px);
}
@keyframes OpenRight {
    25% {
        stroke-dasharray: 100 150;
    }
    60% {
        stroke-dasharray: 100 150;
    }
    100% {
        stroke-dasharray: 150 150;
    }
}
@keyframes OpenLeft {
    25% {
        stroke-dashoffset: -50px;
    }
    60% {
        stroke-dashoffset: -50px;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

HTML

Pacman pagination

svg, css3, pagination

编辑器支持Emmet

快捷键

Pacman pagination

svg, css3, pagination

HTML5 SVG很有趣的一个跳跃式分页动画控件

CSS3+SVG 有创意的动画404页面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：