CSS
语言:
CSSSCSS
确定
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::-moz-selection {
background: Gold;
color: Salmon;
}
::selection {
background: Gold;
color: Salmon;
}
.first {
background: Salmon;
height: 100vh;
padding: 80px 40px;
overflow: hidden;
}
.second {
height: calc(100vh - 160px);
padding: 0 40px;
position: relative;
}
.second:before {
content: "";
width: 1px;
height: 100%;
display: block;
background: Gold;
position: absolute;
top: 0;
left: -1px;
}
.second:after {
content: "";
width: 1px;
height: 100%;
display: block;
background: Gold;
position: absolute;
top: 0;
right: -1px;
}
.third {
position: relative;
top: -40px;
height: calc(100vh - 80px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.third:before {
content: "";
width: 100%;
height: 1px;
display: block;
background: Gold;
position: absolute;
top: -1px;
left: 0;
}
.third:after {
content: "";
width: 100%;
height: 1px;
display: block;
background: Gold;
position: absolute;
bottom: -1px;
left: 0;
}
.third-point-one,
.third-point-two {
text-align: center;
width: 100%;
}
.third-point-one {
color: Gold;
font-size: 72px;
text-shadow: 0 1px 0 Tomato;
word-break: break-all;
}
.third-point-two {
color: Gold;
letter-spacing: 20px;
font-size: 14px;
font-weight: 100;
font-style: italic;
text-shadow: 0 1px 0 Tomato;
}
.second:before {
animation: slideDown 15s infinite;
}
.second:after {
animation: slideUp 15s infinite;
}
.third:before {
animation: slideLeft 15s infinite;
}
.third:after {
animation: slideRight 15s infinite;
}
.third-point-one {
animation: slideRight 5s 5s;
}
.third-point-two {
animation: slideLeft 5s 5s;
}
@keyframes slideDown {
20% {
transform: translateY(150%);
display: none;
visibility: hidden;
opacity: 0;
}
21% {
transform: translateY(-150%);
display: none;
visibility: hidden;
opacity: 0;
}
22% {
display: block;
visibility: visible;
opacity: 1;
}
50% {
transform: translateY(0%);
}
}
@keyframes slideUp {
20% {
transform: translateY(-150%);
display: none;
visibility: hidden;
opacity: 0;
}
21% {
transform: translateY(150%);
display: none;
visibility: hidden;
opacity: 0;
}
22% {
display: block;
visibility: visible;
opacity: 1;
}
50% {
transform: translateY(0%);
}
}
@keyframes slideLeft {
20% {
transform: translateX(-150%);
display: none;
visibility: hidden;
opacity: 0;
}
21% {
transform: translateX(150%);
display: none;
visibility: hidden;
opacity: 0;
}
22% {
display: block;
visibility: visible;
opacity: 1;
}
50% {
transform: translateY(0%);
}
}
@keyframes slideRight {
20% {
transform: translateX(150%);
display: none;
visibility: hidden;
opacity: 0;
}
21% {
transform: translateX(-150%);
display: none;
visibility: hidden;
opacity: 0;
}
22% {
display: block;
visibility: visible;
opacity: 1;
}
50% {
transform: translateY(0%);
}
}