Ahojte, v tomto návode vytvoríme animované počítadlo hodnotení pomocou CSS. Toto počítadlo hodnotení môžeme použiť na hodnotenie produktov alebo článkov atď. Budeme používať iba HTML a CSS, takže to bude ľahké. V tomto počítadle sme implementovali efekty vznášania. Všetky farby a veľkosti písma je možné zmeniť pomocou premenných. Začneme s index.html súborom. index.html <!DOCTYPE html> <head> <title>Počítadlo hodnotenia</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="rating-stars"> <input type="radio" name="rating" id="rs1" checked ><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> </body> </html> Tu používame div s triedou „rating-stars“ ako nadradený kontajner pre náš návrh. Použili sme aj prepínač, pretože prepínač môže vybrať len jednu hodnotu. style.css :root{ --bgColor: #FFFFFF; --shadoColor: rgba(0,0,0,0.1); --starPreColor: #DDDDDD; --starPostColor1: yellow; --starPostColor2: orange; --counterTextColor: #FFFFFF; --counterTextSize: 25px; --counterBgColor: #000000; } body { margin: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--bgColor); } body * { box-sizing: border-box; } .rating-stars { display: block; width: 50vmin; padding: 1.75vmin 10vmin 2vmin 3vmin; box-shadow: 0px 0px 8px 5px var(--shadoColor); border-radius: 5vmin; position: relative; } .rating-counter { font-size: var(--counterTextSize); font-family: Arial, Helvetica, serif; color: var(--counterTextColor); width: 10vmin; text-align: center; background: var(--counterBgColor); 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; display: inline-flex; cursor: pointer; background-color: var(--starPreColor); 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: ""; 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, var(--starPostColor1), var(--starPostColor2) 30% 50%, var(--starPreColor) 50%, 70%, var(--starPreColor) 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: var(--counterTextColor); !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 ; } Ako som už spomenul, používame premenné na zmenu farby nášho dizajnu. :root{ --bgColor: #FFFFFF; --shadoColor: rgba(0,0,0,0.1); --starPreColor: #DDDDDD; --starPostColor1: yellow; --starPostColor2: orange; --counterTextColor: #FFFFFF; --counterTextSize: 25px; --counterBgColor: #000000; } Vysvetlenie každej premennej: –bgColor sa používa na nastavenie farby pozadia. –shadowColor sa používa na zobrazenie tieňa našej hodnotiacej lišty. –starPreColor sa používa na pridelenie primárnej farby našim hodnotiacim hviezdičkám ako svetlošedá. –starPostColor1 a –starPostColor2 sa používajú na vytvorenie prechodovej farby, keď sa na hviezdu aplikuje efekt vznášania a klikne sa na ňu. –counterTextColor sa používa na zafarbenie našich počítacích čísel. –counterTextSize sa používa na nastavenie veľkosti našich textov počítacích čísel. –counterBgColor sa používa na pridanie farby pozadia počítacím číslam. Dúfam, že sa vám tento návod páčil!The post Počítadlo hodnotenia first appeared on Tvorba a správa webových stránok | Frontprog.sk.