html鼠标悬停直线动画,纯CSS鼠标悬停动画 (原创)

html {

height:100%;

}

body {

height:100%;

display:flex;

justify-content:center;

align-items:center;

margin:0 auto;

background:black;

}

main {

width:1500px;

height:300px;

/* background:rgb(219,219,219);

*/

display:flex;

transition:0.5s;

}

main #head {

flex-grow:1;

/* border:1px solid rgb(65,64,64);

*/

box-sizing:border-box;

display:flex;

justify-content:center;

align-items:center;

transition:0.3s;

position:relative;

top:0;

cursor:pointer;

background:rgb(219,219,219);

/* box-shadow:0 0 5px rgb(65,64,64);

*/

}

#head:hover {

height:320px;

top:-10px;

box-shadow:0 0 5px black;

/* background:rgb(65,64,64);

*/

z-index:999;

}

main:active #head {

box-shadow:0 0 5px black;

}

.name {

width:30px;

height:200px;

/* background:yellow;

*/

position:relative;

}

.s {

width:30px;

height:100px;

background:rgb(65,64,64);

transition:0.5s;

position:relative;

}

.s:nth-child(1)::after {

content:'';

width:0px;

height:30px;

background:rgb(65,64,64);

position:absolute;

left:30px;

transition:0.5s;

}

.s:nth-child(2)::after {

content:'';

width:0px;

height:30px;

background:rgb(65,64,64);

position:absolute;

right:30px;

bottom:0;

transition:0.5s;

}

.s:nth-child(1)::before {

content:'';

width:0px;

height:30px;

background:rgb(65,64,64);

position:absolute;

left:0px;

bottom:-15px;

transition:0.5s;

}

.s:nth-child(2)::before {

content:'';

width:0px;

height:30px;

background:rgb(65,64,64);

position:absolute;

right:0px;

top:-15px;

transition:0.5s;

}

#head:hover .s:nth-child(1) {

transform:translateX(-40px);

}

#head:hover .s:nth-child(2) {

transform:translateX(40px);

}

#head:hover .s:nth-child(1)::after {

width:80px;

}

#head:hover .s:nth-child(2)::after {

width:80px;

}

#head:hover .s:nth-child(1)::before {

width:55px;

}

#head:hover .s:nth-child(2)::before {

width:55px;

}

main:active .s:nth-child(1) {

transform:translateX(-40px);

}

main:active .s:nth-child(2) {

transform:translateX(40px);

}

main:active .s:nth-child(1)::after {

width:80px;

}

main:active .s:nth-child(2)::after {

width:80px;

}

main:active .s:nth-child(1)::before {

width:55px;

}

main:active .s:nth-child(2)::before {

width:55px;

}

.u {

width:30px;

height:200px;

background:rgb(65,64,64);

position:absolute;

left:0;

transition:0.5s;

}

.u:nth-child(1)::after {

content:'';

height:30px;

width:0px;

background:rgb(65,64,64);

position:absolute;

bottom:0;

left:0;

transition:0.5s;

}

.u:nth-child(2)::after {

content:'';

height:30px;

width:0px;

background:rgb(65,64,64);

position:absolute;

bottom:0;

right:0;

transition:0.5s;

}

#head:hover .u:nth-child(1) {

left:-40px;

}

#head:hover .u:nth-child(2) {

left:40px;

}

#head:hover .u:nth-child(1)::after {

width:55px;

}

#head:hover .u:nth-child(2)::after {

width:55px;

}

main:active .u:nth-child(1) {

left:-40px;

}

main:active .u:nth-child(2) {

left:40px;

}

main:active .u:nth-child(1)::after {

width:55px;

}

main:active .u:nth-child(2)::after {

width:55px;

}

.n {

width:30px;

height:200px;

background:rgb(65,64,64);

position:absolute;

left:0;

transition:0.5s;

}

#N::after {

content:'';

width:30px;

height:200px;

background:rgb(65,64,64);

position:absolute;

transition:0.5s;

}

#head:hover .n:nth-child(1) {

left:-40px;

}

#head:hover .n:nth-child(2) {

left:40px;

}

#head:hover #N::after {

transform:rotate(-22.5deg);

}

main:active .n:nth-child(1) {

left:-40px;

}

main:active .n:nth-child(2) {

left:40px;

}

main:active #N::after {

transform:rotate(-22.5deg);

}

.w {

width:30px;

height:200px;

background:rgb(65,64,64);

position:absolute;

left:0;

transition:0.5s;

transform-origin:50% 100%;

}

#W::before {

content:'';

width:30px;

height:170px;

background:rgb(65,64,64);

position:absolute;

bottom:0;

transition:0.5s;

transform-origin:100% 0;

}

#W::after {

content:'';

width:30px;

height:170px;

background:rgb(65,64,64);

position:absolute;

bottom:0;

transition:0.5s;

transform-origin:0% 0;

}

#head:hover .w:nth-child(1) {

left:-28px;

transform:rotate(-10deg)

}

#head:hover .w:nth-child(2) {

left:28px;

transform:rotate(10deg)

}

#head:hover #W::before {

transform:rotate(-10deg) translateX(-1px);

}

#head:hover #W::after {

transform:rotate(10deg) translateX(1px);

}

main:active .w:nth-child(1) {

left:-28px;

transform:rotate(-10deg)

}

main:active .w:nth-child(2) {

left:28px;

transform:rotate(10deg)

}

main:active #W::before {

transform:rotate(-10deg) translateX(-1px);

}

main:active #W::after {

transform:rotate(10deg) translateX(1px);

}

.x {

width:30px;

height:200px;

position:absolute;

background:rgb(65,64,64);

transition:0.5s;

}

#head:hover .x:nth-child(1) {

transform:rotate(30deg)

}

#head:hover .x:nth-child(2) {

transform:rotate(-30deg)

}

main:active .x:nth-child(1) {

transform:rotate(30deg)

}

main:active .x:nth-child(2) {

transform:rotate(-30deg)

}

#E {

width:30px;

height:200px;

position:absolute;

background:rgb(65,64,64);

transition:0.5s;

}

#E::after {

content:'';

width:0px;

height:30px;

position:absolute;

top:85px;

left:0;

background:rgb(65,64,64);

transition:0.5s;

}

#head:hover #E {

transform:translateX(-35px)

}

main:active #E {

transform:translateX(-35px)

}

.e {

width:30px;

height:70px;

background:rgb(65,64,64);

position:absolute;

transition:0.5s;

transform:rotate(0);

}

.e:nth-child(1) {

transform-origin:100% 0;

top:0;

}

.e:nth-child(2) {

transform-origin:100% 100%;

bottom:0;

}

#head:hover .e:nth-child(1) {

transform:rotate(-90deg)

}

#head:hover .e:nth-child(2) {

transform:rotate(90deg)

}

#head:hover #E::after {

width:100px;

}

main:active .e:nth-child(1) {

transform:rotate(-90deg)

}

main:active .e:nth-child(2) {

transform:rotate(90deg)

}

main:active #E::after {

width:100px;

}