纯css实现流水点击切换动画效果
代码语言:html
所属分类:菜单导航
代码描述:纯css实现流水点击切换动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: "proxima-nova", sans-serif;
color: white;
display: flex;
height: 100vh;
background: #111;
overflow: hidden;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
background: repeating-linear-gradient(
0deg,
hsla(103, 11%, 32%, 0.09) 0px,
hsla(103, 11%, 32%, 0.09) 1px,
transparent 1px,
transparent 11px
),
repeating-linear-gradient(
90deg,
hsla(103, 11%, 32%, 0.09) 0px,
hsla(103, 11%, 32%, 0.09) 1px,
transparent 1px,
transparent 11px
),
linear-gradient(90deg, hsl(317, 13%, 6%), hsl(317, 13%, 6%));
}
#demo {
width: 90vw;
height: auto;
max-width: 720px;
overflow: visible;
margin: 1rem auto;
}
#icons path {
fill: white;
}
#stretchy {
fill: .........完整代码请登录后点击上方下载按钮下载查看
















网友评论0