svg+css实现炫酷五星打分星级评分点击动画效果代码
代码语言:html
所属分类:星级评分
代码描述:svg+css实现炫酷五星打分星级评分点击动画效果代码
代码标签: svg css 炫酷 五星 打分 星级 评分 点击 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <style> body{ padding: 100px; background: black; } .rating { display: flex; flex-direction: row-reverse; gap: 0.3rem; --stroke: #666; --fill: #ffc73a; } .rating input { appearance: unset; } .rating label { cursor: pointer; } .rating svg { width: 2rem; height: 2rem; overflow: visible; fill: transparent; stroke: var(--stroke); stroke-linejoin: bevel; stroke-dasharray: 12; animation: idle 4s linear infinite; transition: stroke 0.2s, fill 0.5s; } @keyframes idle { from { stroke-dashoffset: 24; } } .rating label:hover svg { stroke: var(--fill); } .rating input:checked ~ label svg { transition: 0s; animation: idle 4s linear infinite, yippee 0.75s backwards; fill: var(--fill); stroke: var(--fill); stroke-opacity: 0; stroke-dasharray: 0; stroke-linejoin: miter; stroke-width: 8px; } @keyframes yippee { 0% { transform: scale(1); fill: var(--fill); fill-opacity: 0; stroke-opacity: 1; stroke: var(--stroke); stroke-dasharray: 10; stroke-width: 1px; stroke-linejoin: bevel; } 30% { transform: scale(0); fill: var(--fill); fill-opacity: 0; stroke-opacity: 1; stroke: var(--stroke); stroke-dasharray: 10; stroke-width: 1px; stroke-linejoin: bevel; } 30.1% { stroke: var(--fill); stroke-dasharray: 0; stroke-linejoin: miter; stroke-width: 8px; } 60% { transform: scale(1.2); fill: var(--fill); } } </style> </head> <body> <div class="rating"> <input type="radio" id="star-1" name="star-radio" value="star-1"> <label for="star-1"> <svg xmlns="http://.........完整代码请登录后点击上方下载按钮下载查看
网友评论0