div+js实现发光彩灯旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+js实现发光彩灯旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } html, body { background: #222; overflow: hidden; width: 100%; height: 100%; } .view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-perspective: 400; perspective: 400; } .plane { width: 120px; height: 120px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .plane.main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -webkit-transform: rotateX(60deg) rotateZ(-30deg); transform: rotateX(60deg) rotateZ(-30deg); -webkit-animation: rotate 20s infinite linear; animation: rotate 20s infinite linear; } .plane.main .circle { width: 120px; height: 120px; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; border-radius: 100%; box-sizing: border-box; box-shadow: 0 0 60px crimson, inset 0 0 60px crimson; } .plane.main .circle::before, .plane.main .circle::after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 10%; height: 10%; border-radius: 100%; background: crimson; box-sizing: border-box; box-shadow: 0 0 60px 2px crimson; } .plane.main .circle::before { -webkit-transform: translateZ(-90px); transform: translateZ(-90px); } .plane.main .circle::after { -webkit-transform: translateZ(90px); transform: translateZ(90px); } .plane.main .circle:nth-child(1) { -webkit-transform: rotateZ(72deg) rotateX(63.435deg); transform: rotateZ(72deg) rotateX(63.435deg); } .plane.main .circle:nth-child(2) { -webkit-transform: rotateZ(144deg) rotateX(63.435deg); transform: rotateZ(144deg) rotateX(63.435deg); } .plane.main .circle:nth-child(3) { -webkit-transform: rotateZ(216deg) rotateX(63.435deg); transform: rotateZ(216deg) rotateX(63.435deg); } .plane.main .circle:nth-child(4) { -webkit-transform: rotateZ(288deg) rotateX(63.435deg); transform: rotateZ(288deg) rotateX(63.435deg); } .plane.main .circle:nth-child(5) { -webkit-transform: rotateZ(360deg) rotateX(63.435deg); transform: rotateZ(360deg) rotateX(63.435deg); } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); transform: rotateX(0) rotateY(0) rotateZ(0); } 100% { -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); transform: rotateX(0) rotateY(0) rotateZ(0); } 100% { -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } .resp{ left: 50%; margin-left: -200px; /* A metade de sua largura. */ position: absolute; bottom:85; } .button { position: absolute; top: 80vmin; left: 120vmin; width: 40vmin; height: 8vmin; background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-left: -100px; /* A metade de .........完整代码请登录后点击上方下载按钮下载查看
网友评论0