div+css实现一种旋转抓钩刺动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现一种旋转抓钩刺动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { --speed: 2s; margin: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; background: linear-gradient(120deg, #f5f5f5 50%, #ccc); } .container { width: 70vmin; height: 70vmin; position: relative; } .blade { --next-hue-index: calc(var(--index) + 1); --hue: calc(240 + 20 * var(--index)); --next-hue: calc(240 + 20 * var(--next-hue-index)); position: absolute; top: 0; left: 50%; width: 5%; height: 50%; transform: translateX(-50%) rotate(calc(72deg * var(--index))) translateY(96%); transform-origin: bottom center; -webkit-animation: spin var(--speed) linear infinite, jump var(--speed) infinite; animation: spin var(--speed) linear infinite, jump var(--speed) infinite; } .blade:nth-child(1) { --index: 0; } .blade:nth-child(2) { --index: 1; } .blade:nth-child(3) { --index: 2; } .blade:nth-child(4) { --index: 3; } .blade:nth-child(5) { --index: 4; --next-hue-index: 0; } @-webkit-keyframes spin { to { transform: translateX(-50%) rotate(calc(72deg * (var(--index) + 1))) translateY(96%); } } @keyframes spin { to { transform: translateX(-50%) rotate(calc(72deg * (var(--index) + 1))) translateY(96%); } } @-webkit-keyframes jump { 30% { transform: translateX(-50%) rotate(calc(72deg * (var(--index) + 1))) translateY(98%); } } @keyframes jump { 30% { transform: translateX(-50%) rotate(calc(72deg * (var(--index) + 1))) translateY(98%); } } .blade::after { content: ""; position: absolute; top: 0; left: 0; width: 500%; height: 100%; border-radius: 100% 30%; border-right: 1px solid hsla(var(--hue), 50%, 50%, 0.5); transform: rotate(.15turn); opacity: 0; -webkit-animation: appear calc(var(--speed) * 2) infinite, wire calc(var(--speed) * 4) infinite; animation: appear calc(var(--speed) * 2) infinite, wire calc(var(--speed) * 4) infinite; } @-webkit-keyframes appear { 15% { opacity: 1; } 30% { opacity: 0; } } @keyframes appear { 15% { opacity: 1; } 30% { opacity: 0; } } @-webkit-keyframes wire { 25% { transform: scale(1.5) rotate(.75turn); } 50%, 100% { transform: scale(1) rotate(.15turn); } 75% { transform: scale(2) rotate(1turn); } } @keyframes wire { 25% { transform: scale(1.5) rotate(.75turn); } 50%, 100% { transform: scale(1) rotate(.15turn); } 75% { transform: scale(2) rotate(1turn); } } .segment { position: absolute; width: calc(100% - var(--seg-depth) * 25%); height: 62%; left: 50%; bottom: 100%; transform: translateX(-50%) rotate(calc(16deg * var(--seg-depth))); transform-origin: bottom center; background: hsl( var(--hue), calc(50% + 6% * var(--seg-depth)), calc(50% - 6% * var(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0