div+css实现有交互的彩色荧光棒摇摆动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现有交互的彩色荧光棒摇摆动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: space-around; align-items: center; height: 100vh; margin: 0; background-color: #000; } .lightsaber { position: relative; width: 10px; height: 300px; background-color: #222; overflow: hidden; animation: rotateAnimation 1s infinite alternate; transform-origin: bottom; } .handle { bottom: 0; position: absolute; width: 100%; background: linear-gradient(to left, #000, #666); height: 50px; } .blade { bottom: 0; position: absolute; width: 100%; height: 300px; background: linear-gradient(to bottom, #f00, #f99); transition: height 0.3s; } .lightsaber.blue .blade { background: linear-gradient(to bottom, #00f, #99f); } .lightsaber:hover .blade { height: calc(var(--cursorY) + 10px); } .lightsaber:hover .blade::before { position: absolute; top: var(--cursorY); left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: #fff; border-radius: 50%; } .lightsaber:nth-child(1n) { animation-delay: 0.25s; } .lightsaber:nth-child(2n) { animation-delay: 0.5s; } .lightsaber:nth-child(3n) { animation-delay: 0.75s; } .lightsaber:nth-child(4n) { animation-delay: 1s; } .lightsaber:nth-child(5n) { animation-delay: 1.25s; } .lightsaber:nth-child(6n) { animation-delay: 1.5s; } .lightsaber:nth-child(7n) { animation-delay: 1.75s; } .lightsaber:nth-child(8n) { animation-delay: 2s; } @keyframes rotateAnimation { 0% { transform: rotateZ(0deg); filter: blur(2px); } 25% { transform: rotateZ(3deg); filter: blur(0px); } 50% { transform: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0