纯CSS实现评级和计数器效果

纯CSS实现评级和计数器代码。

纯CSS实现评级和计数器代码

HTML代码:

<div class="rating-stars">
    <input type="radio" name="rating" id="rs0" checked><label for="rs0"></label>
    <input type="radio" name="rating" id="rs1"><label for="rs1"></label>
    <input type="radio" name="rating" id="rs2"><label for="rs2"></label>
    <input type="radio" name="rating" id="rs3"><label for="rs3"></label>
    <input type="radio" name="rating" id="rs4"><label for="rs4"></label>
    <input type="radio" name="rating" id="rs5"><label for="rs5"></label>
    <span class="rating-counter"></span>
</div>

CSS代码:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #11114e;
    background: radial-gradient( circle at 50% 100%, #1d659f, #11114e);	
}

body * {
    box-sizing: border-box;
}

.rating-stars {
    display: block;
    width: 50vmin;
    padding: 1.75vmin 10vmin 2vmin 3vmin;
    background: linear-gradient(90deg, #ffffff90 40vmin, #fff0 40vmin 100%);
    border-radius: 5vmin;
    position: relative;
}

.rating-counter {
    font-size: 5.5vmin;
    font-family: Arial, Helvetica, serif;
    color: #9aacc6;
    width: 10vmin;
    text-align: center;
    background: #0006;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border-radius: 0 5vmin 5vmin 0;
    line-height: 10vmin;
}

.rating-counter:before {
    content: "0";
    transition: all 0.25s ease 0s;	
}

input { display: none; }

label {
    width: 5vmin;
    height: 5vmin;
    background: #000b;
    display: inline-flex;
    cursor: pointer;
    margin: 0.5vmin 0.65vmin;
    transition: all 1s ease 0s;	
    clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
}

label[for=rs0] {
    display: none;
}

label:before {
    width: 90%;
    height: 90%;
    content: "";
    background: orange;
    z-index: -1;
    display: block;
    margin-left: 5%;
    margin-top: 5%;
    clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
    background: linear-gradient(90deg, yellow, orange 30% 50%, #184580 50%, 70%, #173a75 100%);
    background-size: 205% 100%;
    background-position: 0 0;
}

label:hover:before {
    transition: all 0.25s ease 0s;		
}

input:checked + label ~ label:before {
    background-position: 100% 0;
    transition: all 0.25s ease 0s;	
}

input:checked + label ~ label:hover:before {
    background-position: 0% 0
}

#rs1:checked ~ .rating-counter:before {
    content: "1";
}

#rs2:checked ~ .rating-counter:before {
    content: "2";
}

#rs3:checked ~ .rating-counter:before {
    content: "3";
}

#rs4:checked ~ .rating-counter:before {
    content: "4";
}

#rs5:checked ~ .rating-counter:before {
    content: "5";
}

label + input:checked ~ .rating-counter:before {
    color: #ffab00 !important;
    transition: all 0.25s ease 0s;
}

label:hover ~ .rating-counter:before {
    color: #9aacc6 !important;
    transition: all 0.5s ease 0s;	
    animation: pulse 1s ease 0s infinite;
}

@keyframes pulse {
    50% { font-size: 6.25vmin; }
}

label[for=rs1]:hover ~ .rating-counter:before {
    content: "1" !important;
}

label[for=rs2]:hover ~ .rating-counter:before {
    content: "2" !important;
}

label[for=rs3]:hover ~ .rating-counter:before {
    content: "3" !important;
}

label[for=rs4]:hover ~ .rating-counter:before {
    content: "4" !important;
}

label[for=rs5]:hover ~ .rating-counter:before {
    content: "5" !important;
}


input:checked:hover ~ .rating-counter:before {
    animation: none !important;
    color: #ffab00 !important ;
}

/*** INITIAL ANIMATION - Not Necessary ***/
/*** I want to make a loop here ***/
/*
label + input + label:before {
    animation: start 0.5s ease 0s 1;
}

.rating-stars:hover label + input + label:before {
    animation: none;
}

label[for=rs2]:before {
    animation-delay: 0.1s;
}

label[for=rs3]:before {
    animation-delay: 0.2s;
}

label[for=rs4]:before {
    animation-delay: 0.3s;
}

label[for=rs5]:before {
    animation-delay: 0.4s;
}

@keyframes start {
    10%, 90% { background-position: 0% 0; }
}

*/

 

 

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 纯CSS实现评级和计数器效果

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们