html css 箭头效果,CSS3 很棒的一个关闭按钮动效（箭头晃动效果）

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto:400,);

@-webkit-keyframes slideDown {

0% {

-webkit-transform: translateY(0);

}

10% {

-webkit-transform: translateY(-8px);

}

40% {

-webkit-transform: translateY(100px);

}

50% {

-webkit-transform: translateY(-8px);

}

65% {

-webkit-transform: translateY(4px);

}

85% {

-webkit-transform: translateY(-2px);

}

100% {

-webkit-transform: translateY(0);

}

}

@keyframes slideDown {

0% {

-webkit-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

10% {

-webkit-transform: translateY(-8px);

-ms-transform: translateY(-8px);

transform: translateY(-8px);

}

40% {

-webkit-transform: translateY(100px);

-ms-transform: translateY(100px);

transform: translateY(100px);

}

50% {

-webkit-transform: translateY(-8px);

-ms-transform: translateY(-8px);

transform: translateY(-8px);

}

65% {

-webkit-transform: translateY(4px);

-ms-transform: translateY(4px);

transform: translateY(4px);

}

85% {

-webkit-transform: translateY(-2px);

-ms-transform: translateY(-2px);

transform: translateY(-2px);

}

100% {

-webkit-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

}

* {

box-sizing: border-box;

}

body {

display: table;

height: 100%;

width: 100%;

font-family: Roboto, Helvetica Neue, sans-serif;

}

.text {

font-size: 18px;

text-transform: uppercase;

color: #000;

font-weight: 400;

margin: 0 auto 30px;

text-align: center;

}

.vertical-align {

display: table-cell;

vertical-align: middle;

height: 100vh;

}

.close-button-container {

width: 30px;

position: relative;

margin: 0 auto;

}

.close-button {

position: absolute;

margin: 0 auto;

border: 2px solid #1a1a1a;

background: transparent;

border-radius: 20px;

padding: 15px 15px 15px;

cursor: pointer;

height: 30px;

width: 30px;

-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.close-button:hover {

border: 2px solid #333;

-webkit-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.close-button:after,

.close-button:before {

position: absolute;

top: 3px;

right: 3px;

bottom: 0;

left: 50%;

-webkit-transform: rotate(45deg) translateX(0) translateY(0);

-ms-transform: rotate(45deg) translateX(0) translateY(0);

transform: rotate(45deg) translateX(0) translateY(0);

height: 1.5em;

width: 0.15em;

background: #1a1a1a;

content: '';

display: block;

margin: 0 0 0 -1px;

-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.close-button:hover:after,

.close-button:hover:before {

background: #333;

}

.close-button:hover:after {

-webkit-transform: rotate(-315deg) translateX(7px) translateY(1px);

-ms-transform: rotate(-315deg) translateX(7px) translateY(1px);

transform: rotate(-315deg) translateX(7px) translateY(1px);

height: 0.9em;

width: 0.15em;

-webkit-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.close-button:hover:before {

-webkit-transform: rotate(-405deg) translateX(-7px) translateY(1px);

-ms-transform: rotate(-405deg) translateX(-7px) translateY(1px);

transform: rotate(-405deg) translateX(-7px) translateY(1px);

height: 0.9em;

width: 0.15em;

-webkit-transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.close-button:before {

-webkit-transform: rotate(-45deg) translateX(0) translateY(0);

-ms-transform: rotate(-45deg) translateX(0) translateY(0);

transform: rotate(-45deg) translateX(0) translateY(0);

}

.slide-down {

-webkit-animation-name: slideDown;

animation-name: slideDown;

-webkit-animation-duration: 1200ms;

animation-duration: 1200ms;

-webkit-animation-iteration-count: 1;

animation-iteration-count: 1;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

}