css布局绘制三维灯塔旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:css布局绘制三维灯塔旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --sizeVar: 50px; --percentSize: calc(var(--sizeVar) / 50); } body { background: linear-gradient( 0deg, #ffffff77 0%, #ffffff00 50%, #ffffff00 100% ); background-color: skyblue; background-size: 100vw 100vh; overflow: hidden; } .lightDiv { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; filter: drop-shadow(-2px 0 0 white); } .wrapper { position: absolute; top: 50%; left: 50%; width: calc(var(--sizeVar) * 2); height: calc(var(--sizeVar) * 10); margin-top: calc(var(--sizeVar) * -5); margin-left: calc(var(--sizeVar) * -1); perspective: 20000px; transform-style: preserve-3d; -webkit-animation: rotateAnim 3000ms linear infinite; animation: rotateAnim 3000ms linear infinite; } .halfHouse { position: absolute; width: 100%; height: 100%; perspective: 20000px; transform-style: preserve-3d; transform-origin: center; } .sideDiv { position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient( -0deg, transparent, transparent 1px, rgba(0, 0, 0, 0.03) 3px, rgba(255, 255, 255, 0.1) 15px ), linear-gradient(90deg, #ffffff 0%, #e0e0e0 100%); background-color: #fff; -webkit-clip-path: polygon(32% 0, 68% 0, 76% 100%, 24% 100%); clip-path: polygon(32% 0, 68% 0, 76% 100%, 24% 100%); transform: translateZ(var(--sizeVar)) rotateX(3deg); } .sideDiv:nth-of-type(2) { transform: translateZ(var(--sizeVar)) rotateY(90deg) rotateX(-3deg); transform-origin: left center; } .sideDiv:nth-of-type(3) { transform: translateZ(var(--sizeVar)) rotateY(-90deg) rotateX(-3deg); transform-origin: right center; } .sideDiv:nth-of-type(4) { transform: translateZ(calc(var(--sizeVar) * -1)) rotateX(-3deg); } .halfHouse:nth-of-type(2) { transform: rotateY(45deg); } .windowDiv { position: absolute; width: 14%; height: 6%; top: 10%; left: 43%; border-radius: 50% 50% 2px 2px; background-color: #00000099; box-shadow: 4px 2px 2px #ffffff44 inset; } .sideDiv:nth-of-type(even) .windowDiv, .sideDiv:nth-of-type(3) .windowDiv { box-shadow: -4px 2px 2px #ffffff44 inset; } .windowDiv:nth-of-type(2) { top: 40%; } .windowDiv:nth-of-type(3) { top: 70%; } .windowDiv::after { content: ""; position: absolute; width: 100%; height: 20%; bottom: -20%; background-color: white; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .railDiv { position: absolute; width: 100%; height: calc(var(--sizeVar) / 4); background: linear-gradient(90deg, #ffffff 0%, #e0e0e0 100%); background-color: white; transform: translateZ(calc(var(--sizeVar) * -1)); transform-style: preserve-3d; } .railDiv:nth-of-type(6) { transform: translateZ(var(--sizeVar)) rotateY(90deg); transform-origin: left center; } .railDiv:nth-of-type(7) { transform: translateZ(var(--sizeVar)) rotateY(-90deg); transform-origin: right center; } .railDiv:nth-of-type(8) { transform: translateZ(var(--sizeVar)); } .railDiv::before { content: ""; position: absolute; width: 60%; left: 20%; top: -600%; height: 600%; background: linear-gradient(90deg, #00000044 0%, #00000000 100%); background-color: #ff3b5b; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: translateY(calc(var(--percentSize) * -86)) rotateX(-60deg) translateZ(calc(var(--percentSize) * 35)); } .green::before { transform: translateY(calc(var(--percentSize) * -86)) rotateX(60deg) translateZ(calc(var(--percentSize) * -35)); } .railDiv::after { content: ""; position: absolute; width: 50%; left: 25%; height: 600%; background-color: rgba(255, 255, 255, 0.3); transform: translateY(calc(var(--percentSize) * -80)); box-shadow: 20px 0 30px 0 rgba(0, 0, 0, 0.3) inset, 9px 9px 0 0 #ff3b5b inset, -9px -35px 0 0 #ff3b5b inset; } .octaRoof { position: absolute; width: calc(var(--sizeVar) * 4); height: calc(var(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0