高尔夫进球radio选择动画效果代码
代码语言:html
所属分类:表单美化
代码描述:高尔夫进球radio选择动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Sura:wght@400;700&display=swap'); :root { --color-primary: lightgreen; --color-primary-accent: green; --color-secondary: red; --space-sm: 0.5rem; --space: 1rem; --space-md: 3rem; --space-lg: 6rem; --ball-size: 1.25rem; --ball-start-x: calc((var(--space-lg) * -1) - (var(--ball-size) / 2)); --border-width: 0.15rem; --club-offset: max(10vw, 6rem); --hole-height: calc(var(--hole-width) / 1.75); --hole-width: 3rem; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; padding: 0 var(--space); font-size: 1.2rem; font-family: 'Sura', serif; overflow: hidden; } .putting-green { position: relative; padding: var(--space) var(--space-md) var(--space-lg) var(--space-lg); background-color: var(--color-primary); border-radius: 59% 41% 64% 36% / 36% 51% 49% 64%; box-shadow: inset rgba(0,0,0,0.05) -230px -10px 0, inset rgba(0,0,0,0.025) -50px -20px 0; } .putting-green > * + * { margin-top: 2rem; } legend { position: relative; top: -2rem; margin-left: -1.75rem; z-index: 0; } legend::before { --width: 0.25rem; --height: 7rem; --offset: 14px; content: ''; position: absolute; top: -6px; left: 1px; width: var(--width); height: var(--height); background: repeating-linear-gradient(to bottom, red, red var(--offset), whitesmoke var(--offset), whitesmoke calc(var(--offset) * 2)); border-radius: 360px 360px 0 0; box-shadow: inset rgba(0,0,0,0.075) -2px 0 0, rgba(0,0,0,0.05) 0 2px 0; z-index: -1; } legend .string { position: relative; display: block; padding: var(--space-sm) var(--space); font-weight: 700; font-size: 0.8em; text-shadow: rgba(0,0,0,0.25) 1px 1px 0; color: white; background-color: red; box-shadow: inset rgba(0,0,0,0.05) -12px -2px 12px; } legend .string::after { --offset: 8px; content: ''; position: absolute; top: calc(var(--offset) / -2); left: calc(100% - var(--offset)); width: 2rem; height: 100%; background-color: red; -webkit-clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); box-shadow: inset rgba(0,0,0,0.2) 6px 0 12px; z-index: -1; } label { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; font-size: clamp(1.125rem, 4vw, 1.4rem); line-height: 1.2; cursor: pointer; } label input { opacity: 0; width: 0; height: 0; } .hole { position: relative; -webkit-box-flex: 0; flex: 0 0 var(--hole-width); margin-right: var(--space); width: var(--hole-width); height: var(--hole-height); background-color: black; border: var(--border-width) solid black; border-radius: 50%; box-shadow: inset var(--color-primary-accent) 0 calc(var(--border-width) * 1.25) 0; -webkit-transform: translateY(calc(var(--border-width) * -1)); transform: translateY(calc(var(--border-width) * -1)); } .ball { position: absolute; top: calc(var(--border-width) * -2); right: calc(var(--border-width) * -2); width: calc(var(--space-lg) + var(--hole-width)); height: var(--hole-height); border-radius: 0 0 360px 0; z-index: 100; pointer-events: none; overflow: hidden; } .ball::before { content: ''; visibility: hidden; position: absolute; top: 0; right: calc(var(--ball-size) - var(--border-width) * 1.5); width: var(--ball-size); height: var(--ball-size); background-color: white; border-radius: 50%; border: var(--border-width) solid black; box-shadow: inset rgba(0,0,0, 0.1) -3px -2px 0; } .club { position: absolute; visibility: hidden; top: -7.5rem; right: calc(100% + var(--space-lg)); width: 0.25rem; height: 8rem; background-color: silver; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; box-shadow: inset rgba(0,0,0,0.2) -2px 0 0, black 0 0 0 var(--border-width); } .club::before, .club::after { content: ''; position: absolute; box-shadow: inset rgba(0,0,0,0.2) -5px -1px 0, black 0 0 0 var(--border-width); } .club::before { left: -2px; width: calc(100% + 4px); height: 50%; border-radius: 360px; background: repeating-linear-gradient(to bottom, gray, gray 2px, black 2px, black 3px); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .club:after { left: -6px; bottom: 0; width: calc(100% + 12px); height: 0.6rem; border-radius: 4px 4px 50% 50%; -webkit-transform: translateY(50%); transform: translateY(50%); background-color: inherit; } label .string { position: relative; top: -0.125rem; padding-right: var(--space); } /* Checked states */ input:checked ~ .hole .club { visibility: visible; -webkit-animation: take-a-stroke 1s cubic-bezier(0.33, 1, 0.68, 1) forwards; animation: take-a-stroke 1s cubic-bezier(0.33, 1, 0.68, 1) forwards; } input:checked ~ .hole .ball::before { visibility: visible; -webkit-animation: roll 1.5s linear forwards; animation: roll 1.5s linear forwards; } input:checked ~ .string { color: var(--color-primary-accent); } /* Animation keyframes */ @-webkit-keyframes take-a-stroke { 0% { opacity: 0; -webkit-transform: rotate(5deg) scale(1.001); transform: rotate(5deg) scale(1.001); } 40% { opacity: 1; -webkit-transform: rotate(10deg) scale(1.001); transform: rotate(10deg) scale(1.001); } 70% { -webkit-transform: rotate(-15deg) scale(1.001); transform: rotate(-15deg) scale(1.001); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { opacity: 1; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0