css+js实现鼠标滚轮滚动横向时间线效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现鼠标滚轮滚动横向时间线效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #f0f2f5; color: beige; overflow: hidden; cursor: default; } .horizontal-window { width: 100vw; height: 100vh; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; position: relative; -webkit-overflow-scrolling: touch; } .intro { width: 100vw; flex-shrink: 0; box-sizing: border-box; } .intro-content { text-align: center; flex-shrink: 0; background: linear-gradient(to right, #667eea, #764ba2); color: white; padding: 50px; border-radius: 10px; box-sizing: border-box; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin-left: auto; margin-right: auto; max-width: 550px; } .line { position: absolute; width: calc(100% - 150px); height: 2px; background-color: #ccc; top: 50%; z-index: 1; } .timelineContainer { display: flex; align-items: center; flex-wrap: nowrap; padding-left: 50px; padding-right: 50px; box-sizing: border-box; position: relative; height: 400px; width: calc(auto +100px); gap: 50px; } .card { position: relative; height: 400px; width: 250px; box-sizing: border-box; cursor: pointer; margin-right: 50px; } .card:hover .upper, .card:hover .lower { transform: translateY(0); } .upper { height: 200px; width: 250px; position: relative; display: flex; justify-content: center; color: white; font-family: 'Open Sans', sans-serif; font-weight: bolder; font-size: 25px; align-items: center; justify-content: center; flex-direction: column; z-index: 3; transform: translateY(100px); transition: 0.3s ease-in-out; } .year { font-size: 35px; margin-bottom: 10px; } .lower { height: 200px; position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; background: white; box-sizing: border-box; transform: translateY(-100px); transition: 0.3s ease-in-out; color: black; z-index: 2; } .lower p { text-align: center; } .card1 { backgro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0