js+css实现简洁清爽的星级评分打分效果代码
代码语言:html
所属分类:星级评分
代码描述:js+css实现简洁清爽的星级评分打分效果代码
代码标签: js css 简洁 清爽 星级 评分 打分 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap'); :root { --background-color: #d5e8e9; --star0: #e7e7e7; --star1: #ec5146; --star2: #f6963c; --star3: #ffd447; --star4: #b0c954; --star5: #61bd61; } * { box-sizing: border-box; } body { background-color: var(--background-color); font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .stars-container { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px; } .star-box { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 5px; } .star-box p { font-size: 0.7rem; margin-top: 0; } .star { font-size: 35px; color: #fff; position: relative; margin: 0px 5px; z-index: 0; user-select: none; -webkit-user-select: none; } .star:hover { cursor: pointer; } .star::before { content: '★'; position: absolute; color: var(--star0); z-index: -10; top: 0px; left: 0px; transform: scale(1.5); } .is-selected#star1::before, .is-selected#star1 { color: var(--star1); } .is-selected#star2::before, .is-selected#star2 { color: var(--star2); } .is-selected#star3::before, .is-selected#star3 { color: var(--star3); } .is-selected#star4::before, .is-selected#star4 { color: var(--star4); } .is-selected#star5::before, .is-selected#star5 { color: var(--star5); } .rating-container { background-color: white; border-radius: 10px; padding: 30px; box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.1); } h1 { margin: 0; text-align: center; font-size: 1.5rem; letter-spacing: 1px; font-weight: 300; } .user-rating { border-radius: 10px; display: flex; flex-direction: column; } .user-rating h2 { margin: 0; text-align: center; font-size: 1.2rem; } .user-rating span { text-align: center; } </style> </head> <body > <div class="rating-container"> <h1>How would you rate us?</h1> <div class="stars.........完整代码请登录后点击上方下载按钮下载查看
网友评论0