css+div实现彩色三维滚筒棒滚下来动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现彩色三维滚筒棒滚下来动画效果代码
代码标签: css div 彩色 三维 滚筒棒 滚下来 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #111; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 40em; overflow: hidden; font-size: 2vh; * { transform-style: preserve-3d; } } .scene { position: relative; -webkit-animation: scene 60s infinite linear; animation: scene 60s infinite linear; --duration: 4s; } @-webkit-keyframes scene { to { rotate: y -1turn; } } @keyframes scene { to { rotate: y -1turn; } } .mainStick { --angle: asin(3/5); position: absolute; inset: -0px -10em; background-color: #fff; -webkit-animation: poleBase var(--duration) infinite ease-in; animation: poleBase var(--duration) infinite ease-in; .stick { position: absolute; inset: 0em; background-color: #f00; -webkit-animation: poleTranslate var(--duration) calc(var(--duration) * -0) infinite cubic-bezier(.4,0,.6,2.3); animation: poleTranslate var(--duration) calc(var(--duration) * -0) infinite cubic-bezier(.4,0,.6,2.3); i { position: absolute; inset: -0.4em -3em; background-color: hsl(0 0% calc((sin(var(--i) * 45deg) + 1) * 40% + 20%) ); box-shadow: 0 0 0.5em #0005 inset; transform: translateY(-2em) rotateX(calc(var(--i) * 45deg)) translateZ(0.95em); } } } @-webkit-keyframes poleBase { 0% { transform-origin: right; transform: translate(-2em, 0em) rotate(calc(var(--angle) * -1)); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 4% { transform-origin: right; transform: translate(-2em, 0em) rotate(calc(var(--angle) * -0.9)); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 10% { transform-origin: right; transform: translate(-2em, 0em) rotate(calc(var(--angle) * -1)); } 25% { transform-origin: left; transform: translate(2em, 12em) rotate(calc(var(--angle) * -1)); } 50% { transform-origin: left; transform: translate(2em, 12em) rotate(var(--angle)); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 54% { transform-origin: left; transform: translate(2em, 12em) rotate(calc(var(--angle) * 0.9)); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { transform-origin: left; transform: translate(2em, 12em) rotate(var(--angle)); } 75% { transform-origin: right; transform: translate(-2em, 24em) rotate(var(--angle)); } 100% { transform-origin: right; transform: translate(-2em, 24em) rotate(calc(var(--angle) * -1)); } 0% { translate: 0 0; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { translate: 0 -24em; } } @keyframes poleBase { 0% { transform-origin: right; transform: translate(-2em, 0em) rotate(calc(var(--angle) * -1)); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 4% { transform-origin: right; transform: translate(-2em, 0em) rotate(calc(var(--angle) * -0.9)); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 10% { transform-origin: right; transform: translate(-2em, 0em) rotate(calc(var(--angle) * -1)); } 25% { transform-origin: left; transform: translate(2em, 12em) rotate(calc(var(--angle) * -1)); } 50% { transform-origin: left; transform: translate(2em, 12em) rotate(var(--angle)); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 54% { transform-origin: left; transform: translate(2em, 12em) rotate(calc(var(--angle) * 0.9)); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { transform-origin: left; transform: translate(2em, 12em) rotate(var(--angle)); } 75% { transform-origin: right; transform: translate(-2em, 24em) rotate(var(--angle)); } 100% { transform-origin: right; transform: translate(-2em, 24em) rotate(calc(var(--angle) * -1)); } 0% { translate: 0 0; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { translate: 0 -24em; } } @-webkit-keyframes poleTranslate { 0%, 100% { translate: 3em; } 50% { translate: -3em; } } @keyframes poleTranslate { 0%, 100% { translate: 3em; } 50% { translate: -3em; } } .sticks { .stick { position: absolute; -webkit-animation: stick calc(var(--duration) * 4) calc(var(--duration) / -2 * var(--s)) infinite linear; animation: stick calc(var(--duration) * 4) calc(var(--duration) / -2 * var(--s)) infinite linear; &:nth-child(even) { --translateX: -8em; } i { position: absolute; inset: -0.4em -10em; background-color: hsl(calc(var(--s) * 45) 100% calc((sin(var(--i) * 45deg) + 1) * 25% + 25%)); box-shadow: 0 0 0.5em #0005 inset; transform: rotateY(90deg) rotateX(calc(var(--i) * 45deg)) translateZ(0.95em); &:nth-child(2)::after, &:nth-child(3)::after, &:nth-child(4)::after { content: ''; posi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0