div+css实现三维五角星星级评分打分点击显示数值效果代码
代码语言:html
所属分类:星级评分
代码描述:div+css实现三维五角星星级评分打分点击显示数值效果代码
代码标签: div css 三维 五角星 星级 评分 打分 点击 显示 数值
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --tb: #ffffff40; --tbh: #ffffff70; --tran: all 0.5s ease 0.1s; } body { margin: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #11114e; perspective: 150vmin; background: radial-gradient( circle at 50% 100%, #1d659f, #11114e); } body * { box-sizing: border-box; transform-style: preserve-3d; } .rating-stars { display: block; width: 65vmin; padding: 3vmin; border-radius: 5vmin; position: relative; display: flex; justify-content: center; transform: rotateX(15deg); } input { display: none; } label { width: 10vmin; height: 10vmin; cursor: pointer; margin: 0.5vmin 1.5vmin; transition: var(--tran); transition-delay: 0s; position: relative; } label:before { position: absolute; width: 100%; height: 100%; content: "\2605"; z-index: 2; font-size: 11vmin; line-height: 11vmin; color: #b1ddff; text-align: center; transform: translateY(0vmin); transition: var(--tran); text-shadow: 1px 1px 1px var(--tb), -1px -1px 1px var(--tb), -1px 0px 1px var(--tb), 1px 0px 1px var(--tb), 0vmin 0.1vmin 1px #1d8be1, 0vmin 0.1vmin 1px #1d8be1, 0vmin 0.2vmin 1px #1b81d1, 0vmin 0.2vmin 1px #1b81d1, 0vmin 0.3vmin 1px #1972b7, 0vmin 0.3vmin 1px #1972b7, 0vmin 0.4vmin 1px #1a76bd, 0vmin 0.4vmin 1px #1a76bd, 0vmin 0.5vmin 1px #196fb1, 0vmin 0.5vmin 1px #196fb1, 0vmin 0.6vmin 1px #1868a5, 0vmin 0.6vmin 1px #1868a5, 0vmin 0.7vmin 1px #155f97, 0vmin 0.7vmin 1px #155f97, 0vmin 0.8vmin 1px #125689, 0vmin 0.8vmin 1px #125689, 0vmin 0.9vmin 1px #104e7d, 0vmin 0.9vmin 1px #104e7d, 0vmin 1.0vmin 1px #104975, 0vmin 1.1vmin 1px #104975, 0vmin 1.1vmin 1px #0e4169, 0vmin 1.2vmin 1px #0e4169, 0vmin 1.2vmin 1px #0c395d, 0vmin 1.3vmin 1px #0c395d, 0vmin 1.3vmin 1px #0a3151, 0vmin 1.4vmin 1px #0a3151, 0vmin 1.4vmin 1px #092c49, 0vmin 1.5vmin 1px #092c49, 0vmin 1.5vmin 1px #072239, 0vmin 1.6vmin 1px #072239, 0vmin 1.6vmin 3px #00000020; filter: drop-shadow(0px 5px 10px #008dff) drop-shadow(0px 5px 30px #008dff); } label:hover:before { color: #e2f2ff; filter: drop-shadow(0px 5px 15px #b1ddff) drop-shadow(0px 5px 30px #b1ddff); } /*** unchecked:before ***/ input:checked + label ~ label:before, input:checked + label ~ label:hover:active:before { transition: var(--tran); color: #ffedb9; color: #18242f; transform: translateY(1.5vmin); filter: none; text-shadow: 1px 1px 1px var(--tbh), -1px -1px 1px var(--tbh), -1px 0px 1px var(--tbh), 1px 0px 1px var(--tbh), 0vmin 0.01vmin 1px #1d8be1, 0vmin 0.02vmin 1px #1d8be1, 0vmin 0.03vmin 1px #1b81d1, 0vmin 0.04vmin 1px #1b81d1, 0vmin 0.05vmin 1px #1972b7, 0vmin 0.06vmin 1px #1972b7, 0vmin 0.07vmin 1px #1a76bd, 0vmin 0.08vmin 1px #1a76bd, 0vmin 0.09vmin 1px #196fb1, 0vmin 0.10vmin 1px #196fb1, 0vmin 0.11vmin 1px #1868a5, 0vmin 0.12vmin 1px #1868a5, 0vmin 0.13vmin 1px #155f97, 0vmin 0.14vmin 1px #155f97, 0vmin 0.15vmin 1px #125689, 0vmin 0.16vmin 1px #125689, 0vmin 0.17vmin 1px #104e7d, 0vmin 0.18vmin 1px #104e7d, 0vmin 0.19vmin 1px #104975, 0vmin 0.20vmin 1px #104975, 0vmin 0.21vmin 1px #0e4169, 0vmin 0.22vmin 1px #0e4169, 0vmin 0.23vmin 1px #0c395d, 0vmin 0.24vmin 1px #0c395d, 0vmin 0.25vmin 1px #0a3151, 0vmin 0.26vmin 1px #0a3151, 0vmin 0.27vmin 1px #092c49, 0vmin 0.28vmin 1px #092c49, 0vmin 0.29vmin 1px #072239, 0vmin 0.3vmin 1px #072239, 0vmin 0.5vmin 3px #00000020; } /*** unchecked:hover:before ***/ input:checked + label ~ label:hover:before, label ~ label:hover:active:before { color: #2196F3; transform: translateY(1vmin); text-shadow: 1px 1px 1px var(--tbh), -1px -1px 1px var(--tbh), -1px 0px 1px var(--tbh), 1px 0px 1px var(--tbh), 0vmin 0.02vmin 1px #1d8be1, 0vmin 0.04vmin 1px #1d8be1, 0vmin 0.06vmin 1px #1b81d1, 0vmin 0.08vmin 1px #1b81d1, 0vmin 0.10vmin 1px #1972b7, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0