react实现星级评分反馈效果代码
代码语言:html
所属分类:星级评分
代码描述:react实现星级评分反馈效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; } #app{ height: 100vh; width:100%; background: powderblue; } .center{ display: flex; justify-content: center; align-items: center; } .star-rating-wrapper{ background: white; text-align: center; flex-direction: column; box-shadow: 4px 4px 12px 0px rgba(0,0,0, 0.15); padding: 3rem 4rem; border-radius: 12px; } .star-rating-wrapper h1{ font-size: 1.6rem; } .star-rating-wrapper p{ color: dimgray; } .star-rating-container{ margin: 0.4rem 0 0rem; display:flex; flex-direction: row; } .star-rating-item{ cursor: pointer; font-size: 2rem; color: lightgray; margin: 0 0.3rem; } .star-rating-item.selected{ color: gold; } </style> </head> <body> <div id="app" class="center"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0