css模拟手机端移动端菜单跳转效果代码

代码语言:html

所属分类:菜单导航

代码描述:css模拟手机端移动端菜单跳转效果代码

代码标签: 移动 菜单 跳转 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
.menu {
  padding: 15px 15px;
  background: white;
}
.menu .category {
  margin: 12px 0 24px;
}
.menu h2 {
  margin: 10px 0 20px -30px;
  padding: 0 20px 0px 30px;
  border-radius: 0 20px 60px 0;
  background: red;
  color: white;
  width: auto;
  display: inline-block;
  font-size: 32px;
  font-weight: 400;
  font-family: "Yellowtail";
  box-shadow: 2px 2px 0px white, 4px 4px 0px red, 6px 6px 0px white,
			8px 8px 0px red;
}
.menu p {
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
}
.menu p:last-of-type {
  border: none;
}
.menu span + span {
  float: right;
}
.header {
  border-radius: 100px;
  margin: 32px auto 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.header::before {
  background: pink;
  width: 2.82in;
  height: 120.........完整代码请登录后点击上方下载按钮下载查看

网友评论0