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

2014-05-01 21:09:23 +0800

此代码仅供参考

代码说明

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

html代码

<style type="text/css">
.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;
    }
}
</style>

<div class="pen">
    <div class="refresh">
        <div class="arrow-top"></div>
        <div class="arrow-bottom"></div>
    </div>
</div>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N