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;
}
總結(jié)
以上是生活随笔為你收集整理的HTML图片瓦片,HTML5 可扩展瓦片式导航栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android adapter排序,An
- 下一篇： html 服务器运行exe,html运行