CSS旋转导航

下载代码

html

css

分享到微信朋友圈

html

<div class="screen">
  <div class="background"></div>
  <div class="stage">
    <div class="page">
      <svg class="cupcake"><use xlink:href="#cupcake"></use></svg>
      <h1>Creamy<br />Cupcakes</h1>
      <p>Who wouldn't want more of these?</p>
      <div class="button_fake">Fake</div>
    </div>
    <div class="page">
      <svg class="cupcake"><use xlink:href="#food"></use></svg>
      <h1>Divine Doughnuts</h1>
      <p>Delicious icing and that soft pastry!</p>
      <div class="button_fake">Fake</div>
    </div>
    <div class="page">
      <svg class="cupcake"><use xlink:href="#dessert"></use></svg>
      <h1>Precious Pancakes</h1>
      <p>Dripping with butter and maple syrup...</p>
      <div class="button_fake">Fake</div>
    </div>
    <div class="page">
      <svg class="cupcake"><use xlink:href="#muffin"></use></svg>
      <h1>Magic Muffins</h1>
      <p>Succulent dough, bathed in soft icing!</p>
      <div class="button_fake">Fake</div>
    </div>
  </div>
  <button class="button button_prev">
    <svg class="arrow"><use xlink:href="#left-arrow"></use></svg>
  </button>
  <button class="button button_next">
    <svg class="arrow"><use xlink:href="#right-arrow"></use></svg>
  </button>
</div>

css

@import url("https://fonts.googleapis.com/css?family=Varela+Round");
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  align-items: center;
  background: #fff;
  display: flex;
  font-family: 'Varela Round', sans;
  justify-content: center;
  overflow: hidden;
}

.screen {
  border-radius: 5vh;
  box-shadow: 0px 20px 25px 1px rgba(0, 0, 0, 0.25);
  height: 80vh;
  overflow: hidden;
  position: relative;
  width: 40vh;
}
.screen::before {
  background: #fff;
  border-bottom-left-radius: 3vh;
  border-bottom-right-radius: 3vh;
  content: '';
  height: 3vh;
  left: -25%;
  margin-left: 50%;
  position: absolute;
  top: -1px;
  -webkit-transform: rotateX(-10deg);
          transform: rotateX(-10deg);
  width: 50%;
  z-index: 1;
}
.screen:hover + .hint {
  opacity: 0.4;
  transition: opacity 1200ms ease-out;
}

.background {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: -webkit-filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stage {
  height: 80vh;
  left: 0;
  position: absolute;
  bottom: 0;
  -webkit-transform-origin: 50% 150%;
          transform-origin: 50% 150%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: -webkit-transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  width: 40vh;
}

.page {
  bottom: 0;
  left: 0;
  height: 80vh;
  padding: 0 5vh;
  position: absolute;
  text-align: center;
  -webkit-transform-origin: 50% 150%;
          transform-origin: 50% 150%;
  width: 40vh;
  /* debug */
  color: #fff;
}
.page:nth-child(2) {
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
}
.page:nth-child(3) {
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.page:nth-child(4) {
  -webkit-transform: rotateZ(270deg);
          transform: rotateZ(270deg);
}

.button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 9vh;
  margin-top: -4.5vh;
  padding: 0;
  opacity: 0.2;
  position: absolute;
  top: 50%;
  -webkit-transform: scaleX(0.8);
          transform: scaleX(0.8);
  transition: opacity 200ms linear;
  width: 7vh;
}
.button:focus {
  outline: none;
}
.button:hover {
  opacity: 0.7;
}

.arrow {
  fill: #fff;
  height: 7vh;
  width: 7vh;
}

.button_next {
  right: 0;
}

h1 {
  font-size: 5vh;
  font-weight: normal;
  line-height: 1.1;
  margin-bottom: 3vh;
}

p {
  font-size: 3vh;
  line-height: 1.2;
  margin-bottom: 5vh;
}

.button_fake {
  background-color: #ff655b;
  border-radius: 3vh;
  font-size: 2.7vh;
  margin: 0 auto;
  padding: 1.5vh;
  text-transform: uppercase;
  width: 25vh;
}

.cupcake {
  height: 25vh;
  width: 25vh;
  margin-top: 10vh;
  margin-bottom: 5vh;
}

.hint {
  color: silver;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vh;
  margin-top: -4vh;
  margin-left: 3vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease-out;
  -webkit-transform: rotateZ(-13deg);
          transform: rotateZ(-13deg);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg