css的小窝— 汉堡菜单

GitHub:八至

作者：狐狸家的鱼

html

<div class="burger-menu">
            <div class="bun"></div>
            <div class="pats">
                <div class="patty">
                <div class="text">
                    <h2>Menu 1</h2>
                    <p>Cheeseburger</p>
                </div>
                </div>
                <div class="patty">
                    <div class="text">
                    <h2>Menu 2</h2>
                    <p>Chicken-Burger</p>
                </div>
                </div>
                <div class="patty">
                <div class="text">
                    <h2>Menu 3</h2>
                    <p>Veggie-Burger</p>
                </div>
                </div>
                </div>
            <div class="bun"></div>
        </div>

css

@import url(https://fonts.googleapis.com/css?family=Bungee);
@import url(https://fonts.googleapis.com/css?family=Chewy);

body{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 100vh;
  min-height: 700px;
  background-color: #46dca5;
  text-align: center;
}

h2 {
  font-family: 'Bungee';
}

p{
  font-family: 'Chewy';
  font-size: 30px;
  opacity: 0;
}

.bun { 
  width: 550px;
  height: 140px;
  background-color: #ffbe23;
  border-radius: 100px 100px 0 0;
  border-bottom: 10px solid #d18b00;
  border-right: 15px solid #ffd580;
}

.bun:nth-of-type(3) { 
  height: 100px;
  border-radius: 0 0 40px 40px;
  border-top: 15px solid #d18b00;
  border-right: 15px solid #ffd580;
  border-bottom: 0px;
}

.patty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 525px;
  height: 90px;
  margin: 10px;
  border-radius: 40px;
  background-color: #682d04;
  border-left: 5px solid #592604;
  border-bottom: 3px solid #592604;
  border-right: 10px solid #7f3705;
  color: #682d04;
  transition: height 0.7s ease-in, color 0.7s ease-in;
}

.patty:first-of-type {
  border-top: 5px solid #592604;
  border-bottom: 10px solid #592604;
}

.patty:nth-of-type(2) {
  border-top: 5px solid #592604;
  border-bottom: 5px solid #592604;
}

.patty:nth-of-type(3) {
  border-top: 10px solid #592604;
}

.patty:hover {
  height: 260px;
  color: #ffbe23;
  transition: height 0.7s ease-in, color 0.7s ease-in;
}

.patty:hover p {
  opacity: 1;
  transition: opacity 0.7s;
}