css3 rgb,CSS3 RGB颜色图标到代码图标的切换动画

CSS

语言：

CSSSCSS

确定

/*White variant colors*/

/*absolute: top 150px left 5px*/

/*fixed: top left*/

/*vandor prefixes*/

body {

background: #333;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

h1 {

color: #0de5a8;

}

h2 {

color: #fff;

}

.g_logo {

position: fixed !important;

top: 50% !important;

left: 50% !important;

-webkit-transform: translate(-50%, -50%) rotate(-29deg);

-moz-transform: translate(-50%, -50%) rotate(-29deg);

-o-transform: translate(-50%, -50%) rotate(-29deg);

-ms-transform: translate(-50%, -50%) rotate(-29deg);

transform: translate(-50%, -50%) rotate(-29deg);

-webkit-transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

-moz-transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

-o-transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

-ms-transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

}

.g_logo .left_square,

.g_logo .right_square,

.g_logo .top_square {

width: 100px;

height: 100px;

display: table-cell;

position: relative;

-webkit-transition: all 0.4s cubic-bezier(0.65, 0.045, 0.405, 1);

-moz-transition: all 0.4s cubic-bezier(0.65, 0.045, 0.405, 1);

-o-transition: all 0.4s cubic-bezier(0.65, 0.045, 0.405, 1);

-ms-transition: all 0.4s cubic-bezier(0.65, 0.045, 0.405, 1);

transition: all 0.4s cubic-bezier(0.65, 0.045, 0.405, 1);

}

.g_logo .left_square {

border: 10px solid rgba(60, 142, 119, 0.8);

background: rgba(60, 142, 119, 0.6);

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-o-border-radius: 50%;

-ms-border-radius: 50%;

border-radius: 50%;

}

.g_logo .top_square {

border: 10px solid rgba(217, 97, 83, 0.8);

background: rgba(217, 97, 83, 0.6);

-webkit-transform: translateX(-186.66px) translateY(-33.33px) scale(1);

-moz-transform: translateX(-186.66px) translateY(-33.33px) scale(1);

-o-transform: translateX(-186.66px) translateY(-33.33px) scale(1);

-ms-transform: translateX(-186.66px) translateY(-33.33px) scale(1);

transform: translateX(-186.66px) translateY(-33.33px) scale(1);

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-o-border-radius: 50%;

-ms-border-radius: 50%;

border-radius: 50%;

z-index: -1;

}

.g_logo .right_square {

border: 10px solid rgba(50, 153, 187, 0.8);

-webkit-transform: translateX(-66.66px) translateY(33.33px);

-moz-transform: translateX(-66.66px) translateY(33.33px);

-o-transform: translateX(-66.66px) translateY(33.33px);

-ms-transform: translateX(-66.66px) translateY(33.33px);

transform: translateX(-66.66px) translateY(33.33px);

background: rgba(50, 153, 187, 0.6);

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-o-border-radius: 50%;

-ms-border-radius: 50%;

border-radius: 50%;

position: relative;

}

.g_logo .right_square:after {

position: absolute;

content: " ";

top: 25px;

left: -100px;

width: 1px;

height: 1px;

opacity: 0;

border-left: 0 solid #f26c4f;

-webkit-transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

-moz-transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

-o-transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

-ms-transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

transition: all 0.5s cubic-bezier(0.65, 0.045, 0.405, 1);

}

.g_logo:hover {

-webkit-transform: translate(-50%, -50%) rotate(0deg);

-moz-transform: translate(-50%, -50%) rotate(0deg);

-o-transform: translate(-50%, -50%) rotate(0deg);

-ms-transform: translate(-50%, -50%) rotate(0deg);

transform: translate(-50%, -50%) rotate(0deg);

}

.g_logo:hover .top_square {

border: 0 solid #d96153;

background: transparent;

-webkit-transform: translateX(-186.66px) translateY(-33.33px) scale(0);

-moz-transform: translateX(-186.66px) translateY(-33.33px) scale(0);

-o-transform: translateX(-186.66px) translateY(-33.33px) scale(0);

-ms-transform: translateX(-186.66px) translateY(-33.33px) scale(0);

transform: translateX(-186.66px) translateY(-33.33px) scale(0);

}

.g_logo:hover .left_square {

border: 20px solid #f26c4f;

background: transparent;

border-top: none;

border-right: none;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

-o-border-radius: 20px;

-ms-border-radius: 20px;

border-radius: 20px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.g_logo:hover .right_square {

border: 20px solid #f26c4f;

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

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

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

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

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

background: transparent;

border-bottom: none;

border-left: none;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

-o-border-radius: 20px;

-ms-border-radius: 20px;

border-radius: 20px;

position: relative;

}

.g_logo:hover .right_square:after {

position: absolute;

content: "";

top: 0px;

left: 0px;

width: 0;

height: 180px;

border-left: 20px solid #f2c45a;

-webkit-border-radius: 20px 0 20px 0;

-moz-border-radius: 20px 0 20px 0;

-o-border-radius: 20px 0 20px 0;

-ms-border-radius: 20px 0 20px 0;

border-radius: 20px 0 20px 0;

opacity: 1;

-webkit-transform: rotate(-22.5deg) translateX(10px) translateY(-5px);

-moz-transform: rotate(-22.5deg) translateX(10px) translateY(-5px);

-o-transform: rotate(-22.5deg) translateX(10px) translateY(-5px);

-ms-transform: rotate(-22.5deg) translateX(10px) translateY(-5px);

transform: rotate(-22.5deg) translateX(10px) translateY(-5px);

}