html鼠标悬停边框颜色,CSS3 鼠标悬停金色边框环绕动效

CSS

语言：

CSSSCSS

确定

body {

height: 100%;

width: 100%;

}

.container {

height: 400px;

width: 500px;

overflow: hidden;

margin: 0 auto;

position: relative;

background-color: red;

margin-top: 60px;

}

.container:hover {

cursor: pointer;

}

.container:hover .overlay {

background-color: rgba(0, 0, 0, 0.8);

}

.container:hover h3 {

opacity: 1;

}

.container:hover span {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-webkit-transition: -webkit-transform 180ms ease;

transition: transform 180ms ease;

}

.container:hover span:nth-of-type(1) {

-webkit-transition-delay: 180ms;

transition-delay: 180ms;

}

.container:hover span:nth-of-type(2) {

-webkit-transition-delay: 360ms;

transition-delay: 360ms;

}

.container:hover span:nth-of-type(3) {

-webkit-transition-delay: 540ms;

transition-delay: 540ms;

}

.container:hover span:nth-of-type(4) {

-webkit-transition-delay: 720ms;

transition-delay: 720ms;

}

.container:hover span:nth-of-type(5) {

-webkit-transition-delay: 900ms;

transition-delay: 900ms;

}

.container h1 {

font-family: 'Open Sans Condensed', sans-serif;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

text-transform: uppercase;

letter-spacing: 12px;

color: #b9a382;

font-size: 66px;

margin: 0;

}

.overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

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

-webkit-transition: background-color ease 200ms;

transition: background-color ease 200ms;

}

.overlay h3 {

font-family: 'Lora', serif;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

text-transform: uppercase;

color: white;

letter-spacing: 4px;

font-size: 14px;

opacity: 0;

will-change: opacity;

-webkit-font-smoothing: antialiased;

margin: 0;

-webkit-transition: opacity 350ms ease;

transition: opacity 350ms ease;

}

.overlay h3:before {

content: '';

display: block;

background-color: rgba(255, 255, 255, 0.8);

width: 100%;

height: 1px;

position: relative;

top: -10px;

}

.overlay h3:after {

content: '';

display: block;

background-color: rgba(255, 255, 255, 0.8);

width: 100%;

height: 1px;

position: relative;

bottom: -10px;

}

span {

position: absolute;

display: block;

background-color: #88714d;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

}

span:nth-of-type(1) {

width: 48%;

top: 2%;

right: 2%;

height: 1px;

-webkit-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

transform-origin: 0 100%;

}

span:nth-of-type(2) {

right: 2%;

top: 2%;

height: 96%;

width: 1px;

-webkit-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

transform-origin: 100% 0;

}

span:nth-of-type(3) {

bottom: 2%;

right: 2%;

width: 96%;

height: 1px;

-webkit-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

transform-origin: 100% 0;

}

span:nth-of-type(4) {

left: 2%;

top: 2%;

height: 96%;

width: 1px;

-webkit-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

transform-origin: 0 100%;

}

span:nth-of-type(5) {

top: 2%;

left: 2%;

width: 48%;

height: 1px;

-webkit-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

transform-origin: 0 100%;

}