css双三角形,CSS3 双箭头融合成单个三角形

CSS

语言：

CSSSCSS

确定

.pen {

height: 100px;

width: 100px;

background: #2980b9;

margin: 100px auto;

display: table;

}

.pen:hover .refresh {

-webkit-animation: transform 0.9s linear forwards;

-moz-animation: transform 0.9s linear forwards;

animation: transform 0.9s linear forwards;

}

.pen:hover .refresh .arrow-top {

-webkit-animation: arrowBack 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

-moz-animation: arrowBack 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

animation: arrowBack 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

}

.pen:hover .refresh .arrow-bottom {

-webkit-animation: arrow 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

-moz-animation: arrow 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

animation: arrow 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

}

.pen:hover .refresh .arrow-bottom:after {

-webkit-animation: hideFront 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

-moz-animation: hideFront 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

animation: hideFront 0.9s cubic-bezier(0.35, 0, 0.25, 1) forwards;

}

.refresh {

width: 32px;

height: 32px;

border-radius: 20px;

border: 4px solid #fff;

margin: 32px auto;

-webkit-transform: rotate(35deg);

-moz-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

transform: rotate(35deg);

}

.arrow-top {

width: 0;

height: 0;

border-top: 12px solid transparent;

border-bottom: 12px solid transparent;

border-left: 12px solid #fff;

-webkit-transform: rotate(270deg);

-moz-transform: rotate(270deg);

-ms-transform: rotate(270deg);

-o-transform: rotate(270deg);

transform: rotate(270deg);

right: 8px;

top: 6px;

position: relative;

z-index: 1000;

}

.arrow-top:before {

content: " ";

background-color: #2980b9;

color: #2980b9;

position: relative;

display: block;

width: 5px;

height: 6px;

bottom: 2px;

right: 1px;

}

.arrow-bottom {

width: 0;

height: 0;

border-top: 12px solid transparent;

border-bottom: 12px solid transparent;

border-left: 12px solid #fff;

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-o-transform: rotate(90deg);

transform: rotate(90deg);

left: 27px;

bottom: 20px;

position: relative;

}

.arrow-bottom:after {

content: " ";

background: #2980b9;

color: #2980b9;

position: relative;

display: block;

width: 5px;

height: 10px;

bottom: 5px;

right: 1px;

}

@-webkit-keyframes transform {

to {

-webkit-transform: rotate(360deg);

border-color: #2980b9;

}

}

@-moz-keyframes transform {

to {

-moz-transform: rotate(360deg);

border-color: #2980b9;

}

}

@keyframes transform {

to {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

border-color: #2980b9;

}

}

@-webkit-keyframes arrow {

50% {

border-top: 12px solid transparent;

border-bottom: 12px solid transparent;

border-left: 12px solid #fff;

}

100% {

border-top: 25px solid transparent;

border-bottom: 25px solid transparent;

border-left: 25px solid #fff;

-webkit-transform: rotate(0deg);

margin-left: -17px;

margin-top: -15px;

}

}

@-moz-keyframes arrow {

50% {

border-top: 12px solid transparent;

border-bottom: 12px solid transparent;

border-left: 12px solid #fff;

}

100% {

border-top: 25px solid transparent;

border-bottom: 25px solid transparent;

border-left: 25px solid #fff;

-moz-transform: rotate(0deg);

margin-left: -17px;

margin-top: -15px;

}

}

@keyframes arrow {

50% {

border-top: 12px solid transparent;

border-bottom: 12px solid transparent;

border-left: 12px solid #fff;

}

100% {

border-top: 25px solid transparent;

border-bottom: 25px solid transparent;

border-left: 25px solid #fff;

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

margin-left: -17px;

margin-top: -15px;

}

}

@-webkit-keyframes arrowBack {

50% {

right: 8px;

top: 6px;

}

100% {

-webkit-transform: rotate(0deg);

margin-left: 31px;

margin-bottom: 4px;

}

}

@-moz-keyframes arrowBack {

50% {

right: 8px;

top: 6px;

}

100% {

-moz-transform: rotate(0deg);

margin-left: 31px;

margin-bottom: 4px;

}

}

@keyframes arrowBack {

50% {

right: 8px;

top: 6px;

}

100% {

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

margin-left: 31px;

margin-bottom: 4px;

}

}

@-webkit-keyframes hideFront {

100% {

width: 15px;

height: 25px;

bottom: 12px;

right: 12px;

}

}

@-moz-keyframes hideFront {

100% {

width: 15px;

height: 25px;

bottom: 12px;

right: 12px;

}

}

@keyframes hideFront {

100% {

width: 15px;

height: 25px;

bottom: 12px;

right: 12px;

}

}