css+js实现鼠标滚轮卡片旋转式幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:css+js实现鼠标滚轮卡片旋转式幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --transition:1s } html { background:#222; color:white; font-family:system-ui; overflow:hidden } #caro_con { width:0; height:0; position:fixed; left:0; bottom:0; transition:var(--transition) ease-in; transform:rotate(0deg) } .caro_slide { width:min(100vw,100vh); height:100vh; position:absolute; bottom:0; left:0; transform-origin:0 100%; display:grid; place-items:center; box-sizing:border-box } .caro_slide:nth-child(1) { transform:rotate(0deg) } .caro_slide:nth-child(2) { transform:rotate(90deg) } .caro_slide:nth-child(3) { transform:rotate(180deg) } .caro_slide:nth-child(4) { transform:rotate(270deg) } .caro_slide div { max-width:60ch; font-size:1rem; background:#111; color:#222; padding:0 3rem 2rem 3rem; box-sizing:border-box; border-radius:.5rem; box-shadow:0 10px 30px black } .caro_slide:nth-child(1) div { background-color:#f04d43 } .caro_slide:nth-child(2) div { background-color:#f68235 } .caro_slide:nth-child(3) div { background-color:#faaf18 } .caro_slide:nth-child(4) div { background-color:#2ea8c7 } .caro_slide p { font-weight:900; margin-top:0 } h1 { column-span:all } #btn_box { position:absolute; bottom:10px } </style> </head> <body> <div id='caro_con'> <div class='caro_slide'> <div> <h1>1 </h1> <p>Move carousel with mousewheel,left/right arrow keys,or buttons at bottom!!!</p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </div> <div class='caro_slide'> <div> <h1> 4 </h1> <p>Move carousel with mousewheel, left/right arrow keys, or buttons at bottom!!!</p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. </div> </div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0