gsap实现摩天轮旋转效果
代码语言:html
所属分类:动画
代码描述:gsap实现摩天轮旋转效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #FCE69D; } .ferris-wheel { position: relative; width: 502px; height: 502px; } .ferris-wheel .wheel-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; animation: wheel_rotate 30s infinite linear; } .wheels { position: absolute; border: 5px solid #333; width: 502px; height: 502px; border-radius: 50%; box-sizing: border-box; } .wheels:before { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 408px; height: 408px; margin-left: -204px; margin-top: -204px; border: 5px solid #333; border-radius: 50%; box-sizing: border-box; } .wheels:after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 90px; height: 90px; margin-left: -49px; margin-top: -49px; background-color: #333; border: 4px solid #333; border-radius: 50%; box-sizing: border-box; z-index:100 ; } .wheels span { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -1px; border-bottom: 5px solid #59402B; } .wheels span:nth-child(1) { transform: rotate(0deg); } .wheels span:nth-child(2) { transform: rotate(22.5deg); } .wheels span:nth-child(3) { transform: rotate(45deg); } .wheels span:nth-child(4) { transform: rotate(67.5deg); } .wheels span:nth-child(5) { transform: rotate(90deg); } .wheels span:nth-child(6) { transform: rotate(112.5deg); } .wheels span:nth-child(7) { transform: rotate(135deg); } .wheels span:nth-child(8) { transform: rotate(157.5deg); } @keyframes wheel_rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .buckets { position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 0; } .buckets div { position: absolute; top: 50%; left: 50%; width: 64px; height: 52px; border-radius: 05px; transform-origin: 50% 5%; border:1px solid black; animation: bucket_rotate 30s infinite linear; } .buckets div:before { content: ''; position: absolute; left: 50%; top: 0; width: 15px; height: 15px; margin: -15px 0 0 -3px; background-color: #333; border-top-right-radius: 10px; border-top-left-radius: 10px; } .buckets div span { position: absolute; left: 20px; top: 15px; width: 20px; height: 20px; background-color: #c9dfdd; border-left: 1px solid black; border-top: 1px solid black; } .buckets div span:after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 2px; background-color: rgba(0,0,0,.2); } @keyframes bucket_rotate { 0% { transform: rotate(0deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0