div+css实现三维游乐场旋转木马旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三维游乐场旋转木马旋转动画效果代码
代码标签: div css 三维 游乐场 旋转 木马 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.cdnfonts.com/css/poppins"); *, *::after, *::before { position: relative; box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; color: #333; height: 100vh; background: radial-gradient(circle at center -20%, #6080c0 0%, #101720 70%); display: flex; justify-content: center; align-items: center; overflow: hidden; } header { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; } header h1 { font-size: 5rem; font-weight: 900; letter-spacing:-8px; text-transform: uppercase; background: text conic-gradient(at 50% 50% in hsl longer hue, hsl(0 100 50), hsl(0 100 50)); color: transparent; width: fit-content; } #carousel { width: 150px; height: 250px; transform: perspective(1000px); margin-top: 0px; transform-style: preserve-3d; animation: var(--rotation-time) carousel linear reverse infinite; rotate: x 0deg; transition: rotate 1s ease-in-out, margin-top 1s ease-in-out; } #carousel:hover { margin-top: -150px; rotate: x -15deg; } #carousel::after, #carousel::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 900px; height: 900px; border-radius: 50%; transform: translate(-50%, 50%) rotateX(90deg); background: radial-gradient(circle at center, transparent 0 395px, #0009 397px 403px, #fff9 405px), repeating-conic-gradient(#fff7 0deg 2.5deg, #fff0 3deg, 27deg, #fff7 27.5deg 30deg), conic-gradient(in hsl longer hue, red, red); z-index: -1; } #carousel::before { bottom: auto; top: 0; transform: translate(-50%, -50%) rotateX(90deg); background: radial-gradient(circle at center, transparent 0 350px, #d00 350px, #900 400px, #d00 450px); } .element { position: absolute; inset: 0; background: linear-gradient(to right, #900, #d00, #900) 70px / 10px no-repeat; transform: rotateY(calc((var(--item) - 1) * 360deg / var(--elements))) translateZ(400px); transform-style: preserve-3d; } .element::after, .element::before { position:absolute; bottom: -52px; border: 1px solid #9097a0; background: linear-gradient(to bottom, #c0c7d0 0%, #606770 100%); height: 50px; } .element::after { content: attr(data-item); left: 0; width: 100%; text-align: center; font-size: 2rem; font-weight: bold; line-height: 50px; transform: translateZ(35px); } .element::before { content:''; left:150px; width:82px; transform-origin: left center; transform: translateZ(35px) rotateY(16deg); } .horse { position: absolute; top: 50%; left: 50%; width: 150px; height: 100px; transform: translate(-50%,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0