html css锚定节点,用纯css实现锚点定位的动画效果

div-1

div-2

div-3

第一页

第二页

第三页

* {

margin: 0;

padding: 0

}

html,body {

height: 100%;

height: 100%;

background: #a3ceff;

overflow: hidden;

}

.top {

width: 100%;

height: 40px;

line-height: 40px;

background: rgba(0, 0, 0, .6);

position: fixed;

z-index: 9;

}

.top label {

display: inline-block;

width: 30%;

color: #fff;

text-align: center;

cursor: pointer;

}

.top label:hover {

background: rgba(0, 0, 0, .4);

}

input {

display: none;

}

h1 {

color: #fff;

padding-top: 20%;

}

.page {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

min-height: 100%;

background: #3C98FF;

text-align: center;

transform: translateY(-100%);

transition: .6s;

}

input[type=radio]:checked + .page {

transform: translateY(0);

animation: fromBtm .4s;

}

@keyframes fromBtm {

from { transform: translateY(100%); }

to { }

}