HTML图片瓦片,HTML5 可扩展瓦片式导航栏

CSS

语言：

CSSSCSS

确定

*,

*:before,

*:after {

box-sizing: border-box;

}

body {

background: indianred;

color: white;

font-family: 'Source Sans Pro';

overflow-x: hidden;

}

ul {

margin: 0;

padding: 0;

list-style-type: none;

}

.tiles {

position: fixed;

z-index: 5;

bottom: 0;

display: flex;

width: 100%;

}

.tiles__tile {

flex: 1;

padding: 20px;

transition: all 0.25s ease-out;

background: rgba(0, 0, 0, 0.5);

cursor: pointer;

}

.tiles__tile.active:nth-child(1) {

background: tomato;

}

.tiles__tile.active:nth-child(2) {

background: deepskyblue;

}

.tiles__tile.active:nth-child(3) {

background: lightseagreen;

}

.tiles__tile.active:nth-child(4) {

background: crimson;

}

.tiles__tile:hover:nth-child(1) {

background: tomato;

}

.tiles__tile:hover:nth-child(2) {

background: deepskyblue;

}

.tiles__tile:hover:nth-child(3) {

background: lightseagreen;

}

.tiles__tile:hover:nth-child(4) {

background: crimson;

}

.content {

z-index: 10;

height: 100vh;

position: fixed;

top: 0;

}

.content__item {

position: absolute;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

z-index: 10;

display: flex;

align-items: center;

padding: 12vw;

visibility: hidden;

transition: all 0.25s ease-out;

}

.content__item.active {

visibility: visible;

}

.content__item.active:before {

transform: scale(1);

}

.content__item.active .content-wrap {

transform: scale(1);

opacity: 1;

}

.content__item .content-wrap {

transform: scale(0.7);

opacity: 0;

transition: all 0.8s 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}

.content__item:before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

background: tomato;

transform-origin: center bottom;

transform: scale(0);

z-index: -1;

transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1);

}

.content__item:nth-child(1):before {

transform-origin: 0% 100%;

background: tomato;

}

.content__item:nth-child(2):before {

transform-origin: 33% 100%;

background: deepskyblue;

}

.content__item:nth-child(3):before {

transform-origin: 66% 100%;

background: lightseagreen;

}

.content__item:nth-child(4):before {

transform-origin: 100% 100%;

background: crimson;

/* --------------- */

}

.stuff {

margin: 6vw;

max-width: 768px;

}

h2 {

font-weight: 300;

}

h3 {

font-size: 48px;

}

p {

font-weight: 300;

font-size: 24px;

}