css实现星级点评评分效果代码

代码语言:html

所属分类:星级评分

代码描述:css实现星级点评评分效果代码

代码标签: css 星级 点评 评分

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@charset "UTF-8";
body {
  display: grid;
  place-content: center;
  min-block-size: 100dvh;
  font-family: sans-serif;
}

.stars {
  display: flex;
  gap: 0.25em;
  margin-inline: auto;
  -webkit-tap-highlight-color: transparent;
}
.stars input {
  all: unset;
  color: gold;
  cursor: pointer;
  font-size: 4rem;
  line-height: 1;
  inline-size: 1em;
  block-size: 1em;
}
.stars input::after {
  transition: color 300ms, -webkit-text-stroke-color 300ms, scale 500ms cubic-bezier(0.5, -4, 0.5, 4);
  content: "★";
  display: block;
  -webkit-text-strok.........完整代码请登录后点击上方下载按钮下载查看

网友评论0