logo自动旋转 html,HTML/CSS3 Logo选择器

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Product+Sans";

@import "https://fonts.googleapis.com/css?family=Lato:400,700";

@import "https://fonts.googleapis.com/css?family=Nunito:400,700";

body {

background: #eee;

font-family: Lato, sans-serif;

}

.holder {

width: 200px;

height: 250px;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

select {

height: 30px;

margin-top: 20px;

line-height: 30px;

width: 200px;

border: 0;

text-transform: capitalize;

outline: 0;

color: #666;

background: transparent;

border-bottom: solid 4px #ddd;

}

.logos {

width: 200px;

height: 200px;

}

.logos .logo {

position: absolute;

display: none;

text-align: center;

pointer-events: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

cursor: pointer;

}

.logos .logo:first-of-type {

display: block;

}

#pepsi {

width: 180px;

height: 180px;

background: #004883;

margin: 5px 0 0 5px;

border-radius: 50%;

box-shadow: 0 0 0 2px #004883;

border: 5px solid #fff;

overflow: hidden;

}

#pepsi .inner {

width: 170px;

height: 170px;

border-radius: 50%;

margin: 5px 0 0 5px;

}

#pepsi .inner .white {

width: 300px;

height: 300px;

background: #fff;

border-radius: 25%;

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

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

}

#pepsi .inner .red {

background: red;

width: 400px;

height: 400px;

border-radius: 50%;

-webkit-transform: translate(-60%, -141%);

transform: translate(-60%, -141%);

}

#dell {

width: 180px;

height: 180px;

border: 10px solid #0083ca;

border-radius: 50%;

}

#dell p {

font-family: Impact;

text-transform: uppercase;

display: inline-block;

font-size: 75px;

color: #0083ca;

margin-top: 46px;

-webkit-transform: scaleX(1.2) scaleY(0.8);

transform: scaleX(1.2) scaleY(0.8);

}

#dell p.e {

-webkit-transform: rotate(-45deg) scaleX(2) translateY(-5px);

transform: rotate(-45deg) scaleX(2) translateY(-5px);

font-size: 60px;

margin: 0 2px 0 8px;

}

#google p {

display: inline-block;

font-family: 'Product Sans', Arial, sans-serif;

font-size: 60px;

margin: 70px -2px;

}

#google p.g {

color: #4c90fb;

}

#google p.e {

color: #ef4c3b;

}

#google p.o {

color: #fec303;

}

#google p.l {

color: #3bb15d;

}

#dominos {

width: 180px;

height: 180px;

margin: 10px 0 0 10px;

-webkit-transform: rotate(-45deg) scale(0.8);

transform: rotate(-45deg) scale(0.8);

}

#dominos .d1,

#dominos .d2 {

display: inline-block;

width: 88px;

height: 88px;

background: #d42c2f;

border-radius: 7px;

}

#dominos .d1:before,

#dominos .d1:after,

#dominos .d2:after {

position: absolute;

content: '';

background: #fff;

display: block;

width: 30px;

height: 30px;

border-radius: 50%;

margin: 29px;

}

#dominos .d1:before {

margin: 16px;

}

#dominos .d1:after {

margin: 42px;

}

#dominos .blue {

width: 180px;

height: 88px;

background: #005480;

border-radius: 7px;

font-family: Nunito, sans-serif;

font-weight: 700;

font-size: 32px;

line-height: 35px;

color: #fff;

}

#dominos .blue p {

margin: 0;

text-align: left;

text-indent: 15px;

}

#dominos .blue p:first-of-type {

border-top: 7px solid transparent;

}