div+css实现三维游戏手柄旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:div+css实现三维游戏手柄旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Squada+One); *:after, *:before { content: ''; position: absolute; width: inherit; height: inherit; } body { perspective: 800px; background: #EEE; } .controller { margin: 60px auto; transform-style: preserve-3d; width: 400px; height: 180px; background: #353334; position: relative; transform-origin: 50% 100%; animation: rotate 4.5s infinite; animation-direction: alternate; font-family: 'Squada One', cursive; box-shadow: 0 25px 0 15px #d0cfcd inset, 0 0 0 15px #d0cfcd inset ; } .controller:before { height: 100px; background: rgba(0,0,0,.3); box-shadow: 0 0 20px 10px #EEE inset; -webkit-filter: blur(20px); border-radius: 50px; transform: rotateX(70deg) translateZ(-160px); } .controller:after { background: #CCC; background-image: radial-gradient(#222 8px, transparent 8px), radial-gradient(#222 8px, transparent 8px), radial-gradient(#222 8px, transparent 8px), radial-gradient(#222 8px, transparent 8px), radial-gradient(#222 8px, transparent 8px), radial-gradient(#222 8px, transparent 8px); background-repeat: no-repeat; background-size: 16px 16px; background-position: 374px 154px, 50% 154px, 10px 154px, 374px 10px, 50% 10px, 10px 10px; transform: translateZ(-40px); } .controller .logo { font-size: 20px; color: #a42d17; position: absolute; left: 270px; top: 40px; transform: translateZ(1px); } .sides { list-style: none; margin: 0; padding: 0; position: absolute; transform-style: preserve-3d; } .sides li { position: absolute; background: #999592; transform-origin: 0 0; box-shadow: 0 25px 0 0 #888 inset, 0 27px 0 0 #555 inset; } .sides li:nth-child(1) { bottom: -40px; height: 40px; width: 400px; transform: rotateX(-90deg); } .sides li:nth-child(2) { bottom: -220px; height: 40px; width: 400px; transform: rotateX(-90deg); } .sides li:nth-child(3) { right: 0px; height: 40px; width: 180px; transform-origin: 100% 0%; transform: rotateX(-90deg) rotateY(90deg); } .sides li:nth-child(4) { left: 220px; height: 40px; width: 180px; transform-origin: 100% 0%; transform: rotateX(-90deg) rotateY(90deg); } .directions ul { list-style: none; margin: 0; padding: 0; position: absolute; left: 30px; top: 70px; transform: translateZ(1px); } .directions li { background: #ccc; border-radius: 5px; position: absolute; } .directions .updown { width: 80px; height: 40px; top: 20px; } .directions .leftright { width: 40px; height: 80px; left: 20px; } .directions ol { list-style: none; margin: 0; padding: 0; position: absolute; border-radius: 3px; transform-style: preserve-3d; } .updown-button { animation: dirPressing1 1s infinite linear alternate; transform-origin: 50% 50%; width: 30px; height: 70px; left: 55px; top: 75px; } .leftright-button { animation: dirPressing1 1s infinite linear alternate; transform-origin: 50% 50%; width: 70px; height: 30px; left: 35px; top: 95px; } .directions ol li { background: #000; width: 100%; height: 100%; } .updown-button li:last-child:before { top: 6px; left: 8px; width: 0; height: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #333; } .updown-button li:last-child:after { bottom: 6px; left: 8px; width: 0; height: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #333; } .leftright-button li:last-child:before { left: 8px; top: 6px; width: 0; height: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 10px solid #333; } .leftright-button li:last-child:after { bottom: 8px; right: 6px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10px solid #333; z-index: 100; } .directions ol li:nth-child(1) { transform: translateZ(2px); } .directions ol li:nth-child(2) { transform: translateZ(4px); } .directions ol li:nth-child(3) { transform: translateZ(6px); } .directions ol li:nth-child(4) { transform: translateZ(8px); } .directions ol li:nth-child(5) { transform: translateZ(10px); background: #151515; } .selectstart { transform: translateZ(1px); position: absolute; width: 100px; height: 15px; top: 40px; left: 135px; border-radius: 5px; background: #848484; box-shadow: 0 20px 0 #848484, 0 40px 0 #848484, 0 110px 0 #848484; } .selectstart:before { background: #848484; border-radius: 0 0 5px 5px; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0