css实现3d⽴体五⾓星,CSS3跳动的3D五⾓星CSS
语⾔：
CSSSCSS
确定
[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);
box sizing}
100% {
transform-origin: right;
transform: translateX(-1rem) rotateZ(-30deg);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。