div+css实现逼真药丸上下浮动旋转动画代码
代码语言:html
所属分类:动画
代码描述:div+css实现逼真药丸上下浮动旋转动画代码
代码标签: div css 逼真 药丸 上下 浮动 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 3; --trans-dur: 0.3s; font-size: calc(20px + (60 - 20) * (100vw - 320px) / (2560 - 320)); } body { display: flex; font: 1em/1.5 sans-serif; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } main { display: flex; margin: auto; min-height: 320px; width: 100%; } .pill, .pill__main, .pill__shadow { position: relative; } .pill { margin: auto; width: 5em; height: 2em; } .pill__main, .pill__main:before, .pill__main:after, .pill__glare, .pill__shadow { animation: pillLiftSpin 4s ease-in-out infinite; } .pill__main { background-image: linear-gradient(90deg,hsl(var(--hue),90%,97.5%) 50%,hsl(var(--hue),90%,50%) 50%); border-radius: 1em; width: 100%; height: 100%; } .pill__main:before, .pill__main:after { content: ""; display: block; position: absolute; width: 50%; height: 100%; } .pill__main:before { animation-name: pillLeft; border-radius: 1em 0 0 1em; box-shadow: -1px 0 0 hsl(0,0%,100%) inset, 0.125em 0.125em 0.5em hsl(var(--hue),10%,85%) inset, -0.125em -0.75em 0.5em hsl(var(--hue),10%,90%) inset; } .pill__main:after { animation-name: pillRight; border-radius: 0 1em 1em 0; box-shadow: -1px 0 0.25em hsl(var(--hue),90%,50%) inset, -0.25em -0.25em 0.25em hsl(var(--hue),90%,65%) inset, 0.25em -0.5em 0.5em hsl(var(--hue),90%,40%) inset, -0.75em 0.5em 0.5em hsl(var(--hue),90%,65%) inset; right: 0; } .pill__glare { animation-name: pillGlare; background-color: hsl(0,0%,100%); box-shadow: 0 0 0.25em 0.2em hsl(0,0%,100%); position: absolute; border-radius: 0.05em; top: 0.95em; right: 0.95em; width: 0.1em; height: 0.1em; transform: rotate(45deg) translate(0,-0.6em) scale(1,0.75); z-index: 1; } .pill__shadow { animation-name: pillShadowSpin; background-color: hsla(0,0%,0%,0.5); border-radius: 1em; filter: blur(12px); margin: -1em auto 0 auto; width: 4.5em; height: 2em; transform: rotateX(60deg); z-index: -1; } /* Animations */ @keyframes pillLiftSpin { from { transform: translateY(0) rotate(0); } 16.67% { transform: translateY(-3em) rotate(0); } 33.33%, 66.67% { transform: translateY(-3em) rotate(-0.5turn); } 50% { transform: translateY(0) rotate(-0.5turn); } 83.33% { transform: translateY(-3em) rotate(-1turn); } to { transform: translateY(0) rotate(-1turn); } } @keyframes pillLeft { from, 16.67%, 83.33%, to { box-shadow: -1px 0 0 hsl(0,0%,100%) inset, 0.125em 0.125em 0.5em hsl(var(--hue),10%,85%) inset, -0.125em -0.75em 0.5em hsl(var(--hue),10%,90%) inset; } 33.33%, 66.67% { box-shadow: -1px 0 0 hsl(0,0%,100%) inset, 0.125em -0.125em 0.5em hsl(var(--hue),10%,85%) inset, -0.125em 0.75em 0.5em hsl(var(--hue),10%,90%) inset; } } @keyframes pillRight { from, 16.67%, 83.33%, to { box-shadow: -1px 0 0.25em hsl(va.........完整代码请登录后点击上方下载按钮下载查看
网友评论0