js+css实现鼠标滚动文字幻灯片旋转切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现鼠标滚动文字幻灯片旋转切换效果代码
代码标签: js css 鼠标 滚动 文字 幻灯片 旋转 切换
下面为部分代码预览,完整代码请点击下载或在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; /* aspect-ratio: 1 / 1; */ position: absolute; bottom: 0; left: 0; transform-origin: 0% 100%; display: grid; place-items: center; /* border-radius: 0 100% 0 0; */ /* border: 2px solid red; */ 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; /* columns: 2; */ /* column-gap: 2rem; */ 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> <!-- Move carousel with mousewheel, left/right arrow keys, or buttons at bottom --> <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 u.........完整代码请登录后点击上方下载按钮下载查看
网友评论0