div+css实现药物胶囊裂开动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现药物胶囊裂开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --black: #000; --white: #fff; --pink: #ee529c; --light-pink: #ec8dba; --grey: #bcbec0; --bg-color: #dfdfdf; --duration: 5s; } body { margin: 0; padding: 0; } .wrapper { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .pill { width: 100%; height: 100%; max-width: 720px; max-height: 720px; } .background { fill: var(--bg-color); } .black-cap, .bg-rim { fill: var(--black); } .bg-fill { fill: var(--white); } .pink-cap { fill: var(--pink); } @layer ball-colors { .ball-gr-1, .ball-gr-2 { fill: var(--grey); } .ball-p-1, .ball-p-2 { fill: var(--light-pink); } .ball-b-1, .ball-b-2, .ball-b-3 { fill: var(--black); } .ball-b-w-1, .ball-b-w-2 { stroke: var(--black); fill: var(--white); stroke-width: 4; stroke-miterlimit: 10; } } @layer ball-animations { .ball-gr-1 { --factor: 0.5; animation: move-right calc(var(--duration) * var(--factor)) 0s both; } .ball-gr-2 { --factor: 2; animation: move-left-gr-2 calc(var(--duration) * var(--factor)) 1.89s both; } .ball-p-1 { --factor: 0.333; --stagger: calc(var(--duration) - calc(var(--factor) * 3)); animation: move-left calc(var(--duration) * var(--factor)) 4.56s both; } .ball-p-2 { --factor: 0.8; animation: move-right calc(var(--duration) * var(--factor)) 8s both; } .ball-b-1 { --factor: 0.5; animation: move-right calc(var(--duration) * var(--factor)) 2.3s both; } .ball-b-2 { --factor: 0.2; animation: move-left calc(var(--duration) * var(--factor)) 6s both; } .ball-b-3 { --factor: 0.7; animation: move-right calc(var(--duration) * var(--factor)) 1.5s both; } .ball-b-w-1 { --factor: 0.3; animation: move-left calc(var(--duration) * var(--factor)) 3s both; } .ball-b-w-2 { --factor: 0.333; animation: move-right calc(var(--duration) * var(--factor)) 1s both; } .ball-b-1, .ball-b-2, .ball-b-3, .ball-p-1, .ball-p-2, .ball-b-w-1, .ball-b-w-2, .ball-gr-1, .ball-gr-2 { animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; will-change: transform; } } @keyframes move-right { from { transform: none; } to { transform: translateX(48.61%) translateY(28.47%); } } @keyframes move-left { from { transform: none; } to { transform: translateX(-48.61%) translateY(-28.47%); } } @keyframes move-left-gr-2 { from { transform: none; } to { transform: translateX(-52.78%) translateY(-28.47%); } } </style> </head> <body > <div class="wrapper"> <svg xmlns="http://www.w3.org/2000/svg" class="pill" width="720" height="720" viewBox="0 0 720 720.........完整代码请登录后点击上方下载按钮下载查看
网友评论0