anime+svg实现点赞动画效果代码
代码语言:html
所属分类:动画
代码描述:anime+svg实现点赞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --particle-color: #3049e9; --intervel: 30; } * { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } body .canvas { padding-top: 75px; width: 75px; left: 75px; } body .canvas svg .hand { fill: none; stroke: #231f20; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; transform-origin: left; } body .canvas svg .underline-section { background-color: #fff; } body .canvas svg .underline { stroke: #231f20; stroke-linecap: round; stroke-width: 2px; transform-origin: top; } body .canvas svg .under-particle { stroke: var(--particle-color); opacity: 0; stroke-width: 3px; } body .canvas svg #under-particle-1 { transform: rotate(20deg); } body .canvas svg #under-particle-3 { transform: rotate(-20deg); } body .canvas svg .upper-particle { transform-origin: center; transform: rotate(0deg); } body .canvas .particle-container { position: absolute; width: 150px; height: 150px; top: calc(50% - 25px); left: 50%; transform: translate(-50%, -50%) scale(1.5); } body .canvas .particle-container .upper-particle { opacity: 0; } body .canvas .particle-container .upper-particle-star { opacity: 0; stroke: #e9c030; stroke-width: 2.5px; } body .canvas .particle-container .upper-particle:nth-chil.........完整代码请登录后点击上方下载按钮下载查看
网友评论0