html 边框带标题,CSS3 动态边框以及标题

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%);

}

}