html导航栏显示箭头,CSS3 菜单指示箭头的变形动画

CSS

语言：

CSSSCSS

确定

body {

background: #1a414a;

}

.button {

color: #1a414a;

border-radius: 2px;

background: #66cc66;

display: inline-block;

text-align: center;

padding: 16px 45px 13px 18px;

line-height: 1.3;

font-weight: bold;

cursor: pointer;

text-decoration: none;

margin: 0 auto;

position: absolute;

top: 50%;

left: 50%;

font-size: 15px;

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

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

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

}

.button:hover {

background: #1bad4b;

}

.button.active {

background: #22d95e;

}

.square {

position: absolute;

top: 16px;

right: 20px;

width: 15px;

height: 15px;

-webkit-transform: translate(0, -3px) rotate(-45deg);

-ms-transform: translate(0, -3px) rotate(-45deg);

transform: translate(0, -3px) rotate(-45deg);

-webkit-transition: .3s ease all;

transition: .3s ease all;

}

.side {

width: 100%;

position: absolute;

height: 4px;

background: #1a414a;

display: block;

-webkit-transition: .3s ease all;

transition: .3s ease all;

}

.side.bottom {

bottom: 0;

-webkit-transform: scale(1, 1);

-ms-transform: scale(1, 1);

transform: scale(1, 1);

-webkit-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

.side.right,

.side.left {

width: 4px;

height: 100%;

-webkit-transform: scale(1, 1);

-ms-transform: scale(1, 1);

transform: scale(1, 1);

-webkit-transform-origin: 50% 0;

-ms-transform-origin: 50% 0;

transform-origin: 50% 0;

}

.side.right {

right: 0;

-webkit-transform: scale(1, 0);

-ms-transform: scale(1, 0);

transform: scale(1, 0);

-webkit-transform-origin: 50% 100%;

-ms-transform-origin: 50% 100%;

transform-origin: 50% 100%;

}

.side.top {

width: 0;

}

.active .square {

-webkit-transform: translate(0, 3px) rotate(-45deg);

-ms-transform: translate(0, 3px) rotate(-45deg);

transform: translate(0, 3px) rotate(-45deg);

}

.active .side.top {

width: 100%;

}

.active .side.right {

-webkit-transform: scale(1, 1);

-ms-transform: scale(1, 1);

transform: scale(1, 1);

}

.active .side.bottom {

-webkit-transform: scale(0, 1);

-ms-transform: scale(0, 1);

transform: scale(0, 1);

}

.active .side.left {

-webkit-transform: scale(1, 0);

-ms-transform: scale(1, 0);

transform: scale(1, 0);

}