js+css实现三维圆球切片旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现三维圆球切片旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: "Inter", sans-serif; --d: 70vmin; --stack: calc(var(--d)/11.5); --c: radial-gradient(rgba(255,0,0,.05), rgba(255,0,0,.05), rgba(255,0,0,.2)); --c: radial-gradient(rgba(255,0,0,.05), rgb(0 0 0 / 5%), rgb(150 32 71)); background: #fff; color: rgba(0, 0, 0, 0.5); } h1 { font-weight: 300; position: fixed; bottom: 1em; left: 50%; transform: translate(-50%, 0); font-size: 1rem; width: 25rem; max-width: 90vw; margin: 0; padding: 0; text-align: center; } .world { position: fixed; top: 0; left: 0; right: 0; bottom: 0; perspective: 600px; } .plain, .surface { position: absolute; top: 50%; left: 50%; background: var(--c); transform-style: preserve-3d; border-radius: 50%; -webkit-backface-visibility: visible; backface-visibility: visible; transform-origin: 50% 50% 0; } .plain { width: var(--d); height: var(--d); transform: translate(-50%, -50%) rotateX(0deg); -webkit-animation: 10s spin linear infinite forwards; animation: 10s spin linear infinite forwards; } .plain:hover { --c: radial-gradient(rgb(255 40 92 / 43%) 50%, rgb(255 0 0 / 0%) 50%, rgb(255 82 114 / 46%)); } .surface { width: 100%; height: 100%; -webkit-animation: 6s scale cubic-bezier(0.66, 0.18, 0.96, 0.13) infinite alternate paused; animation: 6s scale cubic-bezier(0.66, 0.18, 0.96, 0.13) infinite alternate paused; } .surface .surface { -webkit-animation-delay: -1s; animation-delay: -1s; } .surface .surface .surface { -webkit-animation-delay: -2s; animation-delay: -2s; } .surface .surface .surface .surface { -webkit-animation-delay: -3s; animation-delay: -3s; } .surface .surface .surface .surface .surface { -webkit-animation-delay: -4s; animation-delay: -4s; } .surface .surface .surface .surface .surface .surface { -webkit-animation-delay: -5s; animation-delay: -5s; } .surface .surface .surface .surface .surface .surface .surface { -webkit-animation-delay: -6s; animation-delay: -6s; } .surface--bottom, .surface--bottom .surface { --direction: -1; } @-webkit-keyframes spin { 100% { transform: translate(-50%, -50%) rotateX(-360deg); } } @keyframes spin { 100% { transform: translate(-50%, -50%) rotateX(-360deg); } } @-webkit-keyframe.........完整代码请登录后点击上方下载按钮下载查看
网友评论0