svg+css实现星星checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:svg+css实现星星checkbox开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } .star { position: absolute; left: calc(50% - 24px); top: calc(50% - 24px); width: 48px; height: 48px; display: block; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; } .star:before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.06); border-radius: 50%; transform: scale(0.5); opacity: 0; transition: all 0.2s ease; } .star:hover:before { transform: scale(1); opacity: 1; } .star:active:before { transform: scale(0.8); transition: all 0.3s ease; } .star svg { margin: 12px; } .star svg path { stroke: black; fill: rgba(0, 0, 0, 0); } #star:checked + .star svg { animation: starring 0.3s linear forwards; } #star:checked + .star svg path { fill: black; transition: all 0.3s ease; transition-delay: 0.1s; } @keyframes starring { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(90deg) translateY.........完整代码请登录后点击上方下载按钮下载查看
网友评论0