html中边框角度旋转,CSS3 悬停时的彩色边框旋转动画

CSS

语言：

CSSSCSS

确定

html,

body {

background-color: #212121;

}

html *,

body * {

box-sizing: border-box;

}

.canvas {

position: relative;

background: #212121;

width: 300px;

height: 300px;

margin: 10px;

padding: 50px 0;

}

.box {

overflow: hidden;

}

.box--outer {

padding: 5px;

position: relative;

width: 200px;

height: 200px;

margin: 0 auto;

}

.box--inner {

width: 195px;

height: 195px;

background: #212121;

top: 50%;

left: 50%;

-webkit-transform: translateX(-50%) translateY(-50%) scale(0.95);

-ms-transform: translateX(-50%) translateY(-50%) scale(0.95);

transform: translateX(-50%) translateY(-50%) scale(0.95);

position: absolute;

z-index: 1;

text-align: center;

line-height: 195px;

-webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);

transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);

color: #25c1bb;

-webkit-backface-visibility: hidden;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.box-rotate {

position: absolute;

width: 400px;

height: 400px;

top: -100px;

left: -100px;

-webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);

}

.box-rotate .quart {

width: 200px;

height: 200px;

position: absolute;

}

.box-rotate .quart--red {

top: 0;

left: 0;

background: #00bcd4;

}

.box-rotate .quart--green {

top: 0;

left: 200px;

background: #cddc39;

}

.box-rotate .quart--blue {

top: 200px;

left: 200px;

background: #923e9a;

}

.box-rotate .quart--yellow {

top: 200px;

left: 0;

background: #ffc107;

}

.box--outer:hover {

cursor: pointer;

}

.box--outer:hover .box--inner {

width: 195px;

height: 195px;

-webkit-transform: translateX(-50%) translateY(-50%) scale(1);

-ms-transform: translateX(-50%) translateY(-50%) scale(1);

transform: translateX(-50%) translateY(-50%) scale(1);

background: #313131;

}

.box--outer:hover .box-rotate {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}