css实现3d立体五角星,CSS3 跳动的3D五角星

CSS

语言：

CSSSCSS

确定

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {

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

}

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body,

input,

label {

margin: 0;

padding: 0;

}

html,

body {

background-color: #215890;

font-size: 16px;

}

.main {

width: 100vw;

max-width: 100%;

height: 100vh;

max-height: 100%;

}

.starBlock {

width: 100%;

height: 100%;

display: flex;

flex-direction: column-reverse;

justify-content: center;

align-items: center;

padding: 5rem 0;

transform-style: preserve-3d;

}

@media screen and (min-width: 768px) {

.starBlock {

flex-direction: row-reverse;

}

}

.starBlock input {

display: none;

}

.starBlock input:checked + label {

color: #ffd285;

text-shadow: 0 0.1rem 0 #ffb638, 0 0.2rem 0 #ffb638, 0 0.3rem 0 #ffb638, 0 0.4rem 0 #ffb638, 0 0.5rem 0 #ffb638, 0 0.6rem 0 #ffb638, 0 0.7rem 0 #ffb638, 0 0.8rem 0 #ffb638, 0 0 1rem white, 0 0 2rem rgba(255, 219, 158, 0.9), 0 0 3rem rgba(255, 219, 158, 0.5), 0 0 4rem rgba(255, 219, 158, 0.5), 0 0 5rem rgba(255, 219, 158, 0.3), 0 0 6rem rgba(255, 219, 158, 0.3), 0 0 7rem rgba(255, 219, 158, 0.15), 0 0 8rem rgba(255, 219, 158, 0.15);

transform: scale(1.1);

animation: stars 0.75s alternate linear infinite;

}

.starBlock input:active + label {

transform: scale(0.95);

}

.starBlock label {

cursor: pointer;

color: #8c8c8c;

font-size: 7rem;

margin: 1rem 1.5rem;

transform: rotateZ(20deg);

text-shadow: 0 0.1rem 0 #a6a6a6, 0 0.2rem 0 #a6a6a6, 0 0.3rem 0 #a6a6a6, 0 0.4rem 0 #a6a6a6, 0 0.5rem 0 #a6a6a6, 0 0.6rem 0 #a6a6a6, 0 0.7rem 0 #a6a6a6, 0 0.8rem 0 #a6a6a6;

transition: 0.3s;

}

@media screen and (min-width: 992px) {

.starBlock label {

font-size: 8rem;

}

}

.starBlock label:hover {

transform: rotateZ(0) scale(1.1);

}

@keyframes stars {

0% {

transform-origin: left;

transform: translateX(1rem) rotateZ(30deg);

}

100% {

transform-origin: right;

transform: translateX(-1rem) rotateZ(-30deg);

}

}