css实现表情评分滑动条效果代码
代码语言：html
所属分类：星级评分
代码描述：css实现表情评分滑动条效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,100%);
--fg: hsl(var(--hue),10%,10%);
--primary1: hsl(var(--hue),90%,55%);
--primary2: hsl(var(--hue),90%,65%);
--trans-dur: 0.3s;
font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body,
input {
font: 1em/1.5 sans-serif;
}
body {
background-color: var(--bg);
color: var(--fg);
height: 100vh;
display: grid;
place-items: center;
transition:
background-color var(--trans-dur),
color var(--trans-dur);
}
.e-rating,
.e-rating__faces {
display: flex;
}
.e-rating {
--animDur: 2s;
flex-wrap: wrap;
padding-top: 2em;
width: 18em;
}
.e-rating__sr {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
.e-rating__range {
background-color: hsl(var(--hue),10%,50%,0.5);
border-radius: 0.25em;
margin: 0.5em 0.75em;
order: 1;
width: 100%;
height: 0.5em;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.e-rating__range:focus {
outline: transparent;
}
.e-rating__range::-webkit-slider-thumb {
background-color: var(--primary1);
border: 0;
border-radius: 50%;
width: 1.5em;
height: 1.5em;
transition: background-color 0.15s linear;
-webkit-appearance: none;
appearance: none;
}
.e-rating__range:focus::-webkit-slider-thumb,
.e-rating__range::-webkit-slider-thumb:hover {
background-color: var(--primary2);
}
.e-rating__range::-moz-range-thumb {
background-color: var(--primary1);
border: 0;
border-radius: 50%;
width: 1.5em;
height: 1.5em;
transition: background-color 0.15s linear;
}
.e-rating__range:focus::-moz-range-thumb,
.e-rating__range::-moz-range-thumb:hover {
background-color: var(--primary2);
}
.e-rating__faces {
justify-content: space-between;
margin-bottom: 1.5em;
width: 100%;
}
.e-rating__face,
.e-rating__face:after {
border-radius: 50%;
transition:
background-color var(--trans-dur),
transform var(--trans-dur) cubic-bezier(0.42,0,0.58,1);
}
.e-rating__face {
background-color: hsl(50,90%,55%);
position: relative;
width: 3em;
height: 3em;
}
.e-rating__face:after {
background-color: hsla(0,0%,0%,0.2);
content: "";
display: block;
position: absolute;
bottom: -0.125em;
left: calc(50% - 1em);
width: 2em;
height: 0.25em;
transform: translateY(0) scale(0);
z-index: -1;
}
.e-rating__face-inner {
position: relative;
margin: 0.5em 0.75em;
width: 1.5em;
height: 2em;
}
.e-rating__eye,
.e-rating__tear,
.e-rating__mouth {
position: absolute;
}
.e-rating__eye {
background-color: hsl(0,0%,0%);
border-radius: 50%;
top: 0.5em;
left: 0;
width: 0.5em;
height: 0.5em;
}
.e-rating__eye:nth-child(2) {
right: 0;
left: auto;
}
.e-rating__tear {
background-color: hsl(210,90%,65%);
border-radius: 0 50% 50% 50%;
top: 1.5em;
left: 0.5em;
width: 0.5em;
height: 0.5em;
transform: scaleX(0) rotate(45deg);
z-index: 1;
}
.e-rating__tear + .e-rating__tear {
right: 0.5em;
left: auto;
}
.e-rating__face--1 .e-rating__mouth {
box-shadow: 0 0 0 0.125em hsla(0,0%,0%,0.4) inset;
border-radius: 0.75em;
clip-path: polygon(0 0,100% 0,100% 30%,50% 50%,0 30%);
top: 1.25em;
width: 1.5em;
height: 1.5em;
}
.e-rating__face--2 .e-rating__mouth {
background-color: hsla(0,0%,0%,0.4);
border-radius: 0.125em;
bottom: 0.25em;
left: 0.25em;
width: 1em;
height: 0.125em;
}
.e-rating__face--3 .e-rating__eye,
.e-rating__face--4 .e-rating__eye {
background-color: transparent;
box-shadow: 0 0.5em 0 hsl(0,0%,0%) inset;
}
.e-rating__face--3 .e-rating__mouth {
box-shadow: 0 0 0 0.125em hsla(0,0%,0%,0.4) inset;
border-radius: 0.75em;
clip-path: polygon(50% 50%,100% 70%,100% 100%,0 100%,0 70%);
top: 0.5em;
width: 1.5em;
height: 1.5em;
}
.e-rating__face--4 .e-rating__mouth,
.e-rating__face--5 .e-rating__mouth {
clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
}
.e-rating__face--4 .e-rating__mouth {
background-color: #fff;
border-radius: 0.75em;
top: 0.5em;
width: 1.5em;
height: 1.5em;
}
.e-rating__face--5 .e-rating__eye {
background-color: transparent;
transform: rotate(-20deg);
}
.e-rating__face--5 .e-rating__eye + .e-rating__eye {
transform: rotate(20deg);
}
.e-rating__face--5 .e-rating__eye:before,
.e-rating__face--5 .e-rating__eye:after {
background-color: hsl(0,90%,55%);
border-radius: 0.25em 0.25em 0 0;
content: "";
display: block;
position: absolute;
bottom: 0;
width: 0.5em;
height: 0.75em;
transform-origin: 50% 0.5em;
}
.e-rating__face--5 .e-rating__eye:before {
transform: rotate(45deg);
}
.e-rating__face--5 .e-rating__eye:after {
transform: rotate(-45deg);
}
.e-rating__face--5 .e-rating__mouth {
background-color: hsla(0,0%,0%,0.4);
border-radius: 0.75em;
top: 0.5em;
width: 1.5em;
height: 1.5em;
}
.e-rating__range[value="1"] + .e-rating__faces .e-rating__face--1,
.e-rating__range[value="2"] + .e-rating__faces .e-rating__face--2,
.e-rating__range[value="3"] + .e-rating__faces .e-rating__face--3,
.e-rating__range[value="4"] + .e-rating__faces .e-rating__face--4,
.e-rating__range[value="5"] + .e-rating__faces .e-rating__face--5 {
transform: translateY(-2em);
}
.e-rating__range[value="1"] + .e-rating__faces .e-rating__face--1 .e-rating__eye {
animation: face1-1 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="1"] + .e-rating__faces .e-rating__face--1 .e-rating__eye:nth-child(2) {
animation: face1-2 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="1"] + .e-rating__faces .e-rating__face--1 .e-rating__mouth {
animation: face1-3 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="1"] + .e-rating__faces .e-rating__face--1 .e-rating__face-inner {
animation: face1-4 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="1"] + .e-rating__faces .e-rating__face--1 .e-rating__tear {
animation: face1-5 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="2"] + .e-rating__faces .e-rating__face--2 .e-rating__eye {
animation: face2-1 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="2"] + .e-rating__faces .e-rating__face--2 .e-rating__mouth {
animation: face2-2 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="3"] + .e-rating__faces .e-rating__face--3 .e-rating__eye {
animation: face3-1 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="3"] + .e-rating__faces .e-rating__face--3 .e-rating__mouth {
animation: face3-2 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="3"] + .e-rating__faces .e-rating__face--3 .e-rating__face-inner {
animation: face3-3 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="4"] + .e-rating__faces .e-rating__face--4 .e-rating__eye {
animation: face4-1 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="4"] + .e-rating__faces .e-rating__face--4 .e-rating__mouth {
animation: face4-2 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="4"] + .e-rating__faces .e-rating__face--4 .e-rating__face-inner {
animation: face4-3 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="5"] + .e-rating__faces .e-rating__face--5 .e-rating__eye {
animation: face5-1 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="5"] + .e-rating__faces .e-rating__face--5 .e-rating__eye:nth-child(2) {
animation: face5-2 var(--animDur) ease-in-out infinite;
}
.e-rating__range[value="5"] + .e-rating__faces .e-rating__face--5 .e-rating__mouth {
animation: face5-3 var(--a.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0